Skip to content
activate side-effects when location changes in connected-react-router
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
.travis.yml
LICENSE.md
README.md
index.ts
package.json
prettier.config.js
test.ts
tsconfig.json
yarn.lock

README.md

redux-router-cofx Build Status

Activate side-effects when location changes in connected-react-router

import { createStore, applyMiddleware, compose } from 'redux';
import { createBrowserHistory } from 'history';
import { connectRouter, routerMiddleware, push } from 'connected-react-router';
import { createMiddleware, put } from 'redux-cofx';
import cofxMiddlewareCreator from 'redux-router-cofx';

// some side-effect
function* onSomeRoute(location: any) {
  const id = location.params.id;
  yield put({ type: 'fetch-something', payload: id });
}
function* onRootRoute(location: any) {
  yield put({ type: 'fetch-dashboard' });
}

// cofx router that maps routes to effects
const cofxRouterMiddleware = cofxMiddlewareCreator({
  '/': onRootRoute,
  '/something/:id': onSomeRoute,
});
// cofx middleware object
const cofxMiddleware = createMiddleware();

const history = createBrowserHistory();
const reducer = (state: any) => state;
const rootReducer = connectRouter(history)(reducer);
const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(
      cofxMiddleware,
      cofxRouterMiddleware.middleware,
      routerMiddleware(history),
    ),
  ),
);
const location = store.getState().router.location;
// do this when first booting up the app so you can receive an event immediately
store.dispatch(cofxRouterMiddleware.locationChange(location));
// push some location change
store.dispatch(push('/something/123'));
You can’t perform that action at this time.