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

Posted 2023-03-06

【中文标题】react-router-redux 打破了我的应用程序状态

【英文标题】：react-router-redux breaks my application state

【发布时间】：2016-05-20 11:19:44

【问题描述】：

我尝试在我的应用程序中设置 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

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

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

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

我做错了什么？

谢谢大家！

【参考方案1】：

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

【讨论】：

谢谢史蒂文！删除对 combineReducers 的第一次调用（在 reducers/index.js 中）有效！由于减速器已经是一个函数，我虽然可以将减速器组合与另一个减速器合并......显然这是不可能的:-)......

【参考方案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]; ...

因此，您所做的是将对象与函数合并，该函数仅返回对象。仅在您的情况下“路由”。

【讨论】：

谢谢@larrydahooster！删除对 combineReducers 的第一次调用（在 reducers/index.js 中）有效！也许如果我写了combineReducers(rootReducer, routing:routeReducer) ....？