Home

Awesome

redux-url

Build Status npm module

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 with some metadata of the url such as parameters and query.

It works with redux 3.x, 4.x

Install

npm install --save redux-url

Usage

import { createBrowserHistory as createHistory } from 'history'; // 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