April 18, 2016

Bootstrapping function for Redux applications #

We are happy to announce that we just open-sourced a small library for the redux ecosystem called redux-bootstrap.

redux-bootstrap is a bootstrapping function for Redux applications. Redux bootstrap does not generate files for you. It is not a project template or project scaffolding tool and it is not related with Bootstrap (responsive web apps framework).

Redux-bootstrap handles most of the common application initialisation / 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 the React router with Redux.

Create a Root reducer.

Enable DevTools is environment is development / Disable if environment is production.

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-bootrap package handles all this stuff for you!

This idea is based on the bootstrap function which is available in other modern JS framewokrs like the Angular 2.0 or the Aurelia bootstrapping functions.

The basics #

You can install redux-bootstrap using npm:

$ npm install --save redux-bootstrap

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

"dependencies": { "immutable": "^3.7.6", "react": "^15.0.1", "react-dom": "^15.0.1", "react-redux": "^4.4.4", "react-router": "^2.2.4", "react-router-redux": "^4.0.2", "redux": "^3.4.0", "redux-devtools": "^3.2.0", "redux-devtools-dock-monitor": "^1.1.1", "redux-devtools-log-monitor": "^1.0.10", "redux-immutable": "^3.0.6" }

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

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

import bootstrap from "redux-bootstrap"; import routes from "./routes"; import thunk from "redux-thunk"; import * as createLogger from "redux-logger"; import usersReducer from "./reducers/usersReducer"; import reposReducer from "./reducers/reposReducer"; bootstrap({ container: "root", // optional initialState: {}, // optional middlewares: [thunk, createLogger()], // optional reducers: { usersReducer, reposReducer, }, routes: routes });

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

Note. If you are looking for a sample application, you can refer to the tests in the redux-bootstrap GitHub repository to find one. The tests use a whole redux application and the bootstrap function.

Using combineReducers #

Redux bootstrap uses Immutable.js. The combineReducers function from redux don’t work with immutable state but you can use the redux-immutbale 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. 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); }); }

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

interface BootstrapResult { store: Redux.Store, history: ReactRouterRedux.ReactRouterReduxHistory, root: JSX.Element }

TypeScript Support #

The npm package includes type definitions:

/// <reference path="node_modules/redux-bootstrap/type_definitions/redux-bootstrap/redux-bootstrap.d.ts" />

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

We hope that the React / Redux community will enjoy this small utility. Please check it out and help us to find issues. The project can be found on GitHub and we are happy to accept contributions.

Please feel free to share thoughts about this article with us via @OweR_ReLoaDeD and @WolkSoftwareLtd.

Don’t forget to subscribe if you don’t want to miss it out future articles!

49 Kudos