redux-url v1.2.3
redux-url
A redux middleware for synchronizing the url with your redux store's state. It provides a set of action creators for changing the url, and if the url matches a user-defined route, an action will be dispatched, provided with information such as parameters and query.
Install
npm install --save redux-url
Usage
import createHistory from 'history/createBrowserHistory'; // choose a history implementation
import { createStore, applyMiddleware } from 'redux';
import { createRouter, navigate } from 'redux-url';
const routes = {
'/': 'HOME', // when url is matched, will dispatch an action of type 'HOME', the payload contains matched params and query
'/todos/:id': ({ id }, query) => ({ type: 'CHANGE_TODO', payload: id, query }), // you can also pass a function to transform the action, the matched params, query and the original path will be passed in
'*': 'NOT_FOUND'
};
const router = createRouter(routes, createHistory());
const store = createStore(
reducer,
applyMiddleware(router)
);
router.sync(); // In order to restore the state from the URL when refreshed
store.dispatch(navigate('/todos/123')); // navigate to '/todos/123'
API
createRouter(routes, history)
:creates the middleware
arguments
routes (object) : The URL patterns to be mapped, where values can be either of the following:
string:
when the URL matches the route, an action will be dispatched of which the type is the given string, and the payload has the following shape:
{ type: string, payload: { params: Object, query: Object, path: string } }
function: (object, object, string) => Action
a function that takes the matched
params
,query
and the originalpath
, returns an action
history: the history object created from lib
history
, such ascreateBrowserHistory
returns
the middleware which provides the following methods:
sync()
:
synchronize the current url with the state, this is useful for handling the situation when the page is refreshed
navigate(path: string, replace: boolean = false)
:creates an action for navigating to the path,
replace
indicates whether it should modify the current history entry rather than push a new onepush(path: string)
:a shorthand of navigate(path, false)
replace(path, string)
:a shorthand of navigate(path, true)
goBack()
:creates an action for going back
goForward()
:creates an action for going forward
go(n: number)
:creates an action for going n (can be negative) steps