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中的教程进行操作，但遇到了一些问题。

结合似乎有效。

有什么问题？

当第一个减速器被调用（产品）时它起作用当第二个减速器被调用（接触）时，整个状态似乎被替换

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

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

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只获得一个局部状态。

然而，在减速器之外，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)

结合多个减速器

2 个答案: