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":
Then use the bootstrap
function in your application’s entry point.
Note: The following example uses two pieces of Redux middleware:
redux-thunk
andredux-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:
;;;;// Example middlewares:;; bootstrap;
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.
combineReducers
Using 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:
;
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.
For example, when enabling hot loader:
; if module.hot
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.