Rematch: Use with connected-react-router?

[linonetwo]

react-router-redux is deprecated https://github.com/supasate/connected-react-router/issues/74
It's preferred to use connected-react-router.

But to set up connected-react-router we need to pass rootReducer to it. https://github.com/supasate/connected-react-router#step-1

So to work with connected-react-router, I need to write a plugin?

[ShMcK]

I don't think you ever need to write a plugin. Plugins are just a way to make a configuration reusable.

These redux.rootReducer docs may help: https://github.com/rematch/rematch/blob/master/docs/reduxApi.md#rootreducers

[linonetwo]

I need to pass rootReducer to it

redux: {
        middlewares: [routerMiddleware],
        rootReducers: {
          router: connectRouter(history)(rootReducers) // here I have no way to get rootReducers variable
        },
},

But where can I get this rootReducers?
Maybe it's connected-react-router's fault since it's requiring itself to be the root reducer https://github.com/supasate/connected-react-router/blob/master/src/reducer.js#L37

[d3dc]

@linonetwo
EDIT: I don't think the router needs to know anything about reducers, so it is kind of an awkward API. I think you can actually just put an empty reducer in and get its reducers out too...

{
  redux: {
    reducers: connectRouter(history)((state, action) => state)
  }
}

If you really have to, you can already listen to rootReducers

import { combineReducers } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'

export default enhanceWithConnectRouter = (history) => (config) => ({
  ...config,
  redux: {
    ...config.redux,
    combineReducers: (rootReducers) => connectRouter(history)(combineReducers(rootReducers))
  },
  middlewares: [...config.middlewares, routerMiddleware(history)]
})

[linonetwo]

But as https://github.com/rematch/rematch/issues/376#issuecomment-394731320 said, if I want to listen on router change, then loads data according to the new route, I need

{
  effects: {
  ['router/PUSH'](state) {
    ...
    return state;
  },
  },
}

It will cause Invalid effect name at this time.

[YanYuanFE]

import { init } from '@rematch/core';
import { connectRouter, routerMiddleware } from 'connected-react-router';
import createLoadingPlugin from '@rematch/loading';
import createHistory from 'history/createHashHistory';

const options = {};
const loading = createLoadingPlugin(options);

export const history = createHistory();

const reducers = { router: connectRouter(history) };

/**
 * 基于 Rematch 实现的 Redux 最佳实践
 *
 * More: https://rematch.gitbook.io/handbook/
 */
export default (models) => init({
    redux: {
        reducers,
        middlewares: [
            routerMiddleware(history)
        ],
        devtoolOptions: {}
    },
    models,
    plugins: [
        loading
    ]
});