Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
src
.editorconfig
.npmignore
README.md
package.json
tsconfig.json
tslint.json
webpack.config.js

README.md

redux-bootstrap

Join the chat at https://gitter.im/redux-bootstrap/redux-bootstrap Build Status Test Coverage NPM version Dependencies img Known Vulnerabilities

NPM NPM

A bootstrap() function for initializing Redux applications.

This module works by exporting a bootstrap function you can call in your project. It does not generate files for you – it is not a project template or project scaffolding tool. It is not related to the Bootstrap responsive front-end framework.

Why do I need this?

This library handles most of the common application initialization/bootstrapping that takes place every time you create a new Redux project.

When you create a new Redux project you usually need to take care of a few things:

  • Install dependencies.
  • Integrate React Router with Redux.
  • Create a Root reducer.
  • Configure redux-devtools-extension.
  • Integrate Immutable with Redux.
  • Apply middleware.
  • Combine reducers into a root reducer.
  • Create the store.
  • Sync history with store.
  • Create the Root component (Provider, Router).
  • Set the routes, history and store in the Root component.
  • Render the Root component.

The redux-bootstrap package handles all this stuff for you!

This idea is based on the bootstrap functions built into other modern JS frameworks such as Angular 2.0 and Aurelia.

How can I use it?

Install it via NPM:

$ npm install --save redux-bootstrap
$ npm install --save-dev @types/history@2.0.45 @types/react @types/react-dom @types/react-redux @types/react-router@3.0.0 @types/react-router-redux@4.0.39 @types/redux-immutable

The preceding command will install redux-bootstrap and the following dependencies:

"dependencies": {
    "history": "^3.2.1",
    "immutable": "^3.7.6",
    "react": "^15.0.2",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.4",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.2",
    "redux": "^3.5.2",
    "redux-immutable": "^3.0.6",
    "reselect": "^2.5.1"
}

Then use the bootstrap function in your application’s entry point.

Note: The following example uses two pieces of Redux middleware: redux-thunk and redux-logger. These packages are optional but if you are going to use them you will need to install them first:

$ npm install redux-thunk redux-logger --save

All you need to do is import your routes file, your reducers and any additional middleware and pass them to the bootstrap function as configuration:

import { bootstrap, interfaces } from "redux-bootstrap";
import routes from "./routes";
import usersReducer from "./reducers/usersReducer";
import reposReducer from "./reducers/reposReducer";
// Example middlewares:
import thunk from "redux-thunk";
import * as createLogger from "redux-logger";

bootstrap({
    container: "root",                    // optional
    createHistory: createBrowserHistory,  // optional
    historyOptions: {},                   // optional
    initialState: {},                     // optional
    middlewares: [thunk, createLogger()], // optional    
    render: ReactDOM.render,              // optional
    routerProps: interfaces.RouterProps   // optional
    reducers: {
        usersReducer,
        reposReducer,
    },
    routes: routes
});

That’s it – routing, Immutable, and DevTools are ready and you can start working on your app!

Where can I find an example?

If you are looking for a sample application, you can refer to the redux-bootstrap-example repository.

Using combineReducers

Redux Bootstrap uses Immutable.js. The combineReducers function from Redux doesn’t work with Immutable objects in the state, so you should use redux-immutable’s combineReducers function to solve this problem:

import { combineReducers } from "redux-immutable";

Accessing the Store, History & Root Component

Sometimes you need to access the store, synched history or root component. The result object returned by the bootstrap function provides access to these.

interface BootstrapResult {
    store: Redux.Store,
    history: ReactRouterRedux.ReactRouterReduxHistory,
    output: any, // value returned by render()
    root: JSX.Element
}

For example, when enabling hot loader:

const result = bootstrap({/* ... */});

if (module.hot) {
    module.hot.accept("../reducers", () => {
        const nextRootReducer = require("../reducers/index").default;
        // If you use module.exports or Babel 5, remove .default:
        // const nextRootReducer = require("../reducers/index");
        result.store.replaceReducer(nextRootReducer);
    });
}

TypeScript Support

The NPM package includes type definitions. TypeScript 2.0 or higher and the following tsconfig.json configuration is required.

{
    "compilerOptions": {
        "lib": ["es6", "dom"],
        "types": ["node"],
        "jsx": "react"
    }
}

TypeScript is recommended if you want to enjoy the best development experience.