2

我使用以下博客文章中的示例代码制作了一个简单的反应应用程序，我仅将其作为引用。我对 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触发器工作正常。请注意，installfromredux-loop被称为增强器（？）的一部分，这很好。我的减速器中没有任何loop调用，我只是将install命令作为增强器插入，希望能够添加一些。

这是我的主要reducer代码：

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

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

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

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; 我认为这是因为combineReducersin将主减速器的响应类型更改为与调用redux-loop中的不兼容的内容connectRouter(history)(rootReducer)。createStore

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

4

2 回答 2

1

有一个未解决的问题可以解决这个问题，但在完成之前，它需要一个 hack。我用类似这样的东西调用了 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');
    }
  }
)
于 2018-09-24T20:09:52.873 回答
1

v5+ 已经支持它。

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

于 2019-01-01T09:47:44.707 回答