Skip to main content

Redux Plugins

Adding existing Redux Libraries to your Store#

Most reducers from libraries operate on a private store slice. The easiest way to build functionality on top of these reducers is to create a model for that store slice.

The baseReducer option on a store model allows you to introduce a standard redux reducer that will compute the base state of that model. By combining this with effects, you can create a public API over the original redux reducer. These effects can be listened for and tracked.

js
import { bindActionCreators } from "redux";
import {
routerReducer,
push,
replace,
go,
goBack,
goForward,
} from "react-router-redux";
const reactRouterModel = {
baseReducer: routerReducer,
effects: (dispatch) =>
bindActionCreators(
{
push,
replace,
go,
goBack,
goForward,
},
dispatch
),
};
js
import { bindActionCreators } from "redux";
import {
routerReducer,
push,
replace,
go,
goBack,
goForward,
} from "react-router-redux";
const reactRouterModel = {
baseReducer: routerReducer,
effects: (dispatch) =>
bindActionCreators(
{
push,
replace,
go,
goBack,
goForward,
},
dispatch
),
};

Including middleware#

Libraries like react-router also need middleware to work. Since we need both the model and the middleware configured with our store, the best place to do so would be a simple plugin.

This is as easy as returning a config object that is merged into our store.

In our example, react-router uses a history object that we'll need to be able to pass to a ConnectedRouter. We can expose this value for use by attaching it to our store with onInit():

js
import { createBrowserHistory } from "history";
import { routerMiddleware } from "react-router-redux";
import reactRouterModel from "./model";
export default function createReactRouterPlugin() {
const browserHistory = createBrowserHistory();
const middleware = routerMiddleware(browserHistory);
return {
middleware,
config: {
models: {
[storeKey]: reactRouterModel,
},
},
onStoreCreated(store) {
return {
browserHistory,
};
},
};
}
js
import { createBrowserHistory } from "history";
import { routerMiddleware } from "react-router-redux";
import reactRouterModel from "./model";
export default function createReactRouterPlugin() {
const browserHistory = createBrowserHistory();
const middleware = routerMiddleware(browserHistory);
return {
middleware,
config: {
models: {
[storeKey]: reactRouterModel,
},
},
onStoreCreated(store) {
return {
browserHistory,
};
},
};
}

Later, we can use our history

jsx
const App = () => (
<Provider store={store}>
<ConnectedRouter history={store.browserHistory} children={<Routes />} />
</Provider>
);
jsx
const App = () => (
<Provider store={store}>
<ConnectedRouter history={store.browserHistory} children={<Routes />} />
</Provider>
);