kiss-router-redux v1.0.1

Kiss Router Redux Binding

This is a binding to use kiss-router comfortably in JS app that uses redux for it's state management. It provides a way to turn a route matcher from kiss-router in to a reducer, and a function to listen to a history object and dispatch actions to the aforementioned reducer. Here's an example of it in use:

import { createStore, combineReducers } from 'redux';
import createBrowserHistory from 'history/createBrowserHistory';
import createMatcher from 'kiss-router';
import { createReducer, startRouter } from 'kiss-router-redux';

const matcher = createMatcher([
  { name: 'HOME', path: '/' },
  { name: 'POSTS', path: '/posts' },
  { name: 'POST', path: '/posts/:id' },
]);

const reducer = combineReducers({
  route: createReducer(matcher),
  myState: (state = null, action) => state // A real app would use proper reducers
});

const store = createStore(reducer);

// This would typically be instantiated in it's own module to act as a singleton
// so you could push/replace from other parts of your app while still having
// kiss-router-redux pick up navigation changes.
const history = createBrowserHistory();

// This will listen to history changes and dispatch actions for the
// kiss-router-redux reducer created above.
startRouter(store, history);

// You would typically use react or something similar
renderMyApp(store.getState());

store.subscribe(() => {
  renderMyApp(store.getState());
});

// To navigate you would use the history object instantiated above.