`redux-loop` 和 `connected-react-router` 兼容吗？

Question

我使用以下博文中的示例代码制作了一个简单的 React 应用程序，我仅将其作为引用。我是 javascript 生态系统的新手，正在尝试将几个不熟悉的工具组合在一起（以便学习它们）。

https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f

相应地，我的 store.js 看起来像这样：

import { createStore, applyMiddleware, compose, } from 'redux';
import { connectRouter, routerMiddleware, } from 'connected-react-router';
import thunk from 'redux-thunk';
import { install, } from 'redux-loop';
import createHistory from 'history/createBrowserHistory';
import rootReducer from './modules';

export const history = createHistory();

const initialState = {};
const middleWare = [thunk, routerMiddleware(history),];

const composedEnhancers = compose(
  applyMiddleware(...middleWare),
  install()
);

const store = createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
);

export default store;

这似乎工作正常，我页面上的 Link/Route 触发器工作正常。请注意，redux-loop 中的 install 作为增强器 (?) 的一部分被调用，这很好。我的减速器中没有任何 loop 调用，我只是插入了 install 命令作为增强器，希望我能够添加一些。

这是我的主要 reducer 代码：

import { combineReducers, } from 'redux';
import counter from './counter';
import todo from './todo';

export default combineReducers({
  counter,
  todo,
});

同样，这很管用。但是，如果我在我的减速器中的任何地方插入 loop，它就会死掉。根据文档，这是因为我们需要使用 redux-loop 中的 combineReducers。美好的。如果我将顶部的导入替换为 import { combineReducers, } from 'redux-loop';（根本不改变我的减速器，还没有非标准的 returns）然后我在库代码中得到一些完全荒谬的错误：

ConnectedRouter.js:58 Uncaught TypeError: Cannot read property 'pathname' of undefined
    at ConnectedRouter.js:58
    at Object.dispatch (redux.js:221)
    at dispatch (install.js:66)
    at middleware.js:25
    at index.js:11
    at Object.onLocationChanged (ConnectedRouter.js:154)
    at handleLocationChange (ConnectedRouter.js:85)
    at new ConnectedRouter (ConnectedRouter.js:94)
    at constructClassInstance (react-dom.development.js:11769)
    at updateClassComponent (react-dom.development.js:13491)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at renderRoot (react-dom.development.js:16533)
    at performWorkOnRoot (react-dom.development.js:17387)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at requestWork (react-dom.development.js:17155)
    at scheduleWork (react-dom.development.js:16949)
    at scheduleRootUpdate (react-dom.development.js:17637)
    at updateContainerAtExpirationTime (react-dom.development.js:17664)
    at updateContainer (react-dom.development.js:17691)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.de...

它持续了很多页，但问题似乎在 ConnectedRouter；我认为这是因为 redux-loop 中的 combineReducers 将主减速器的响应类型更改为与 createStore 调用中的 connectRouter(history)(rootReducer) 不兼容的类型。

这是正确的问题吗？这是可以修复的吗？这两个库可以一起使用吗？

Answer 1

有一个 open issue 可以解决这个问题，但在解决之前需要破解。我用这样的东西调用了 combineReducers（我使用的是不可变的 js。但如果你不是，那么转换成它很简单）

import { connectRouter } from 'connected-react-router/immutable';
import { Map } from 'immutable';

//....

const routerReducer = connectRouter(history)(() => fromJS({}));
return combineReducers(
  {
    foo: fooReducer,
    blah: blahReducer,
    router: (state, action) => {
      const routerStateWrapper = Map({router: state});
      const result = routerReducer(routerStateWrapper, action);
      return result.get('router');
    }
  }
)

Answer 2

v5+ 已经支持。

发行说明：https://github.com/supasate/connected-react-router/releases/tag/v5.0.0 公关：https://github.com/supasate/connected-react-router/pull/150

`redux-loop` 和 `connected-react-router` 兼容吗？

Are `redux-loop` and `connected-react-router` compatible?

javascript

reactjs

redux

redux-loop

connected-react-router