0.2.3 • Published 4 years ago
simple-react-router-redux v0.2.3
simple-react-router-redux
Redux bindings for react-router. A tiny fork of connected-react-router
Setup
npm install simple-react-router-redux
Usage
Setup your own history module:
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
And configure the store:
import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
import { connectRouter, routerMiddleware } from 'simple-react-router-redux';
import rootReducer from './reducers';
import history from './history';
// Combine your reducers with connectRouter.
const reducers = combineReducers({
...rootReducer,
router: connectRouter(history),
});
const store = createStore(
reducers, // root reducer with router state
initialState,
compose(
applyMiddleware(
routerMiddleware(history), // for dispatching history actions
// ... other middlewares ...
),
),
);
Now just wrap your routes with ConnectedRouter with the same history module
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter } from 'simple-react-router-redux';
import history from './history';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Switch>
<Route exact path="/" render={() => <div>Match</div>} />
<Route render={() => <div>Miss</div>} />
</Switch>
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('react'),
);
Enjoy!