1.0.5 • Published 7 years ago

rrrouter-provider-redux v1.0.5

Weekly downloads
3
License
ISC
Repository
github
Last release
7 years ago

#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.

ActionDescription
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

PropertyDescriptionTypeDefault
stateKeyName of reducer that you usedStringno
initHrefInitial href that will be used at startupStringno

#Usage 1. Setup middleware 2. Setup reducer 3. 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')
);