redux-bootstrap

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@^3.2.0 @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.