joaovieira / connected-next-router

A Redux binding for Next.js Router compatible with Next.js.

v1.0.0 requires React v16.4.0 and React Redux v6.0 or later. If you are using React Redux v5, check out v0 branch.

Connected Next Router

A Redux binding for Next.js Router compatible with Next.js.

Main features

✨ Keep Router state in sync with your Redux store.

🎉 Dispatch Router methods (push, replace, go, goBack, goForward, prefetch) using Redux actions.

🕘 Support time traveling in Redux DevTools.

🎁 Compatible with next-routes.

💎 Ease migration to next.js framework from codebases using connected-react-router or react-router-redux.

Installation

Using npm:

$ npm install --save connected-next-router

Or yarn:

$ yarn add connected-next-router

Usage

Step 1

• Add routerReducer to your root reducer.
• Use createRouterMiddleware if you want to dispatch Router actions (ex. to change URL with push('/home')).
• Use initialRouterState(url) to populate router state in the server side.

...
import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
import { routerReducer, createRouterMiddleware, initialRouterState } from 'connected-next-router'
...
const rootReducer = combineReducers({
  ...reducers,
  router: routerReducer
});

const routerMiddleware = createRouterMiddleware();

/*
If you use next-routes, you have to import Router from your routes.js file
and create the router middleware as below:

const routerMiddleware = createRouterMiddleware({
  Router,
  methods: {
    push: 'pushRoute',
    replace: 'replaceRoute',
    prefetch: 'prefetchRoute',
  },
});
*/

// Using next-redux-wrapper's makeStore
export const makeStore = (initialState = {}, options) => {
  if (options.asPath) {
    initialState.router = initialRouterState(options.asPath);
  }

  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(
      routerMiddleware,
      // ... other middlewares ...
    )
  );
}

Step 2

• Place ConnectedRouter as children of react-redux's Provider.

...
// pages/_app.js
import App, { Container } from 'next/app';
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-next-router'
...
class MyApp extends App {
  render() {
    const { Component, pageProps, store } = this.props;
    return (
      <Container>
        <Provider store={store}>
          <ConnectedRouter>
            <Component { ...pageProps } />
          </ConnectedRouter>
        </Provider>
      </Container>
    );
  }
}

Examples

• examples/basic - basic reference implementation

TODO

• Add unit tests
• Support Immutable.js

Acknowledgements

Acknowledge

License

MIT License