react-router-redux 破坏了我的应用程序状态

Question

我尝试在我的应用程序中设置 react-router-redux，如 here 所示，但它破坏了我的状态。

这是我的商店设置：

import { createStore, applyMiddleware } from 'redux'
import { combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { syncHistory, routeReducer } from 'react-router-redux'
import rootReducer from '../reducers'
import Immutable, {Map} from 'immutable'
[Other imports]

const middleware = [X,Y]

const reducer = combineReducers(Object.assign({}, rootReducer, {
  routing: routeReducer
}));

export default function configureStore(initialState, history) {

   const reduxRouterMiddleware = syncHistory(history);
   middleware.push(reduxRouterMiddleware);

   const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);

   const store = createStoreWithMiddleware(reducer, initialState);     

   return store

}

这是我的 reducers/index.js :

import { combineReducers } from 'redux'
import A from './A'
import B from './B'
import C from './C'
...

const rootReducer = combineReducers({
  A,
  B,
  C,
  ...
})

export default rootReducer

当我在我的 store.getState() 应用程序中 console.log 时，我得到：只有一棵 routing.location 树。

如果我在创建我的商店时使用 "rootReducer" 而不是 "reducer"，我会得到我的正常状态树（A、B、C ...）

但是我当然不再得到我感兴趣的 routing.location 部分...

我做错了什么？

谢谢大家！

Answer 1

我认为这是因为你在自己的减速器上调用 combineReducer，然后再次合并到 routing 减速器。我只是从您自己的减速器中导出一个对象，然后执行 combineReducer 调用一次，您 Object.assign 路由减速器在其中。

Answer 2

我认为问题出在这里：

const reducer = combineReducers(Object.assign({}, rootReducer, {
  routing: routeReducer
}));

rootReducer 不是普通对象，而是 combineReducer 方法返回的函数，看起来像这样：

function combination() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
    var action = arguments[1]; ...
}

因此，您要做的是将一个对象与一个函数合并，returns 仅对象。在您的情况下，仅 'routing'。

react-router-redux 破坏了我的应用程序状态

react-router-redux breaks my application state

javascript

ecmascript-6

reactjs

react-router

redux