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.

smoogly/redux-bootstrap