#Purpose Implementation of Provider for rrrouter with redux support and rrrouter-history as history session manager.
#Installation
npm install --save rrrouter-provider-redux
#API
###Actions N.B.: In most cases you will not use these actions directly, because all that you need - use methods of Router to navigate. Consider these actions as low-level implementation for Router and nothing more.
Action | Description |
---|---|
navigate(href) | Navigate to desired href, where href is string of location to navigate |
go(page) | Move forward/backward in browser history, where page is number of pages to move. |
back() | Move backward - alias for go(-1) |
forward() | Move forward - alias for go(+1) |
P.S.: All actions has prefix that you can get via ROUTER_ACTION, so you can test type of action and do what you need at own reducer/middleware.
import { ROUTER_ACTION } from 'rrrouter-provider-redux';
const routerAction = new RegExp(`^${ROUTER_ACTION}`);
export default function myReducer (state = { }, action) {
if (!routerAction.test(action.type)) {
return state;
}
....do something in case of router action....
return newState;
}
###Provider
Property | Description | Type | Default |
---|---|---|---|
stateKey | Name of reducer that you used | String | no |
initHref | Initial href that will be used at startup | String | no |
#Usage
- Setup middleware
- Setup reducer
- Setup Provider
###Example.1 - setup middleware
import { applyMiddleware, createStore } from 'redux';
import { createMiddleware, HashHistory } from 'rrrouter-provider-redux';
export default function configureStore (rootReducer) {
const history = new HashHistory();
const routerMiddleware = createMiddleware(history);
const middleware = [routerMiddleware];
const store = createStore(
rootReducer,
applyMiddleware(...middleware),
);
return store;
}
###Example.2 - setup reducer
import { combineReducers } from 'redux';
import { reducer as router} from 'rrrouter-provider-redux';
export default combineReducers({
router,
});
###Example.3 - setup Provider
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Provider as RouteProvider } from 'rrrouter-provider-redux';
import configureStore from './redux/configureStore'; //from Example.1
import rootReducer from './redux/rootReducer'; //from Example.2
const store = configureStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<RouteProvider stateKey='router' initHref='/'>
<div>Your application</div>
</RouteProvider>
</Provider>,
document.getElementById('root')
);