组合多个减速器

Question

我有一种情况，我想将我的 reducer 拆分成多个文件，以便我可以妥善管理。

假设我将用减速器做两件事。

仅处理产品。
仅处理联系人。

我可以在同一个文件中执行此操作，但变得难以管理。

因此我想拆分移动用户的可读性。

这里我尝试拆分reducer的文件

这是我将用来获取产品的减速器之一。

module.exports.products=function(state, action) {
console.log("################################## branch_order");
console.log("reducer",state,action);
if (state==null) {
    return {};
}
var new_state=$.extend(true,{},state); // XXX: deep-copy
console.log(action.type,"action type")
switch (action.type) {
    case "PRODUCT_LOADING":
        new_state.product_loading=true;
        break;
    case "PRODUCT_LOADED":
        new_state.product_loading=false;
        new_state.product=action.product;
        break;

}
console.log("new_state",new_state);
return new_state;
}

这是另一个将存储联系人的减速器。

module.exports.contacts=function(state, action) {
console.log("################################## pawn_order",state);
console.log("reducer",state,action);
if (state==null) {
    return {};
}
return state;

}

这就是我组合减速器的方式。

var product = require("./prodcut")
var contact = require ("./contact")
var combineReducers = require ('redux').combineReducers


module.exports = combineReducers({product,contact});

这就是我调用主文件并将其传递给存储的方式。

var reducers = require ("./reducer") /// <<<<< this is how i call 
var RPC = require('./RPC')
//var actions = require("./actions")
var createStoreWithMiddleware=applyMiddleware(thunkMiddleware)(createStore);
var store=createStoreWithMiddleware(reducers);
ReactDOM.render( <Provider store={store}><Index/></Provider> , document.getElementById('content'))

我尝试按照 combine reducers 中的教程进行操作，但运行遇到了一些问题。

合并似乎有效。

怎么了？

当第一个 reducer 被调用（product）时它工作当调用第二个减速器时（接触）整个状态似乎被替换

我想在状态中附加数据（我不知道该怎么做？请帮忙）

仅供参考，这就是我在联系人中调用状态数据的方式：

var select=function(state){
return {
    product_loading:state.product_loading,
    product:state.product,

}
}

这就是我调用组件的方式

render:function(){
    if (!this.props.product_loading) return <div> Loading</div>

提前致谢。期待一些解决方案。

Answer 1

当使用 combineReducers 时，每个 reducer 只能看到一部分状态。

function r1(state) {
  console.log (state); //logs v1
}

function r2(state) {
  console.log (state); //logs v2
}

const c = combineReducers({ r1, r2 });

c({ r1: 'v1', r2: 'v2' }, { type: 'MY_ACTION' });

Answer 2

确实 combineReducers 每个 reducer 只获得一部分本地状态。

然而，在 reducer 之外，state 通常持有状态的全局视图。

例如，在 mapStateToProps 中，要访问本地状态，您需要执行以下操作：

function mapStateToProps(state) {
   return  {
      product_loading: state.product.product_loading,
      product: state.product.product,
      contact: state.contact.contact
   }
}

您也可以尝试 redux-named-reducers 来帮助模块化代码，例如

var product = getState(productModule.product)
var contact = getState(contactModule.contact)

组合多个减速器

Combining Multiple Reducers

reducers

reactjs

redux

react-redux