Introducing redux-bootstrap

 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.

18735372.png

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.

 Motivation

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

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!

magic.gif

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.

 Summary

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!

 
46
Kudos
 
46
Kudos

Now read this

Decorators & metadata reflection in TypeScript: From Novice to Expert (Part IV)

An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection. This article is the fourth part of a series: PART I: Method decorators... Continue →