如何使用immutable.js之类的东西在Redux中组合多个combineReducers函数

Hai*_*ris 6 javascript reactjs immutable.js redux

我使用immutable.JS通过redux-immutablejs管理我的商店.我现在想使用redux-form库,但我遇到了一个组合reducer的问题.

Redux-immutable提供了combineReducers函数,该函数将检查传递的所有reducers是否返回不可变对象.

Redux本身提供了combineReducers函数,不执行此类检查.

Redux-form要求你包含他们的reducer但是我不能使用Redux immutable的combineReducers,因为它会失败.

所以我要做的就是基本上将这两个函数的输出组合起来,如下所示:

import { combineReducers } from 'redux';
import { combineReducers as combineReducersUtils } from 'redux-utils';
import {reducer as formReducer} from 'redux-form';

const mainReducers = combineReducersUtils({
  devices, alarms
});

const extraReducers = combineReducers({
  form: formReducer
});

export default (mainReducers + extraReducers);
Run Code Online (Sandbox Code Playgroud)

最后一行显然不起作用,但基本上说明了我所追求的.

感谢您抽时间阅读.

Luq*_*aan 6

也许是这样的?

function rootReducer(state, action) {
  const newState = combineReducersUtils({devices, alarms})(state, action);
  return combineReducers({form: formReducer})(newState, action);
}
Run Code Online (Sandbox Code Playgroud)

它应该工作,因为combineReducers的返回值只是一个reducer:

(Function):一个reducer,它调用reducers对象中的每个reducer,并构造一个具有相同形状的状态对象.

https://github.com/rackt/redux/blob/master/docs/api/combineReducers.md


更新为不在每个调度上创建新函数:

const mainReducers = combineReducersUtils({devices, alarms});
const formReducers = combineReducers({form: formReducer});

function rootReducer(state, action) {
  return formReducers(mainReducers(state, action), action);
}
Run Code Online (Sandbox Code Playgroud)

  • 这将导致非常糟糕的性能,因为每次调度操作时都要分配一个函数. (4认同)
  • 对于今后读这篇文章的人来说,这里现在已经完全记录为redux-form的一部分http://erikras.github.io/redux-form/#/faq/immutable-js?_k=dqesvr (3认同)
  • @ user3409950我更新了性能部分的答案 (2认同)