如何组织嵌套的Redux reducer?

时间:2017-09-06 20:29:11

标签: javascript reactjs ecmascript-6 redux reducers

我的应用程序部分的减速器将被深深嵌套

 export const MainReducers = function(state = mapDataToInitialState(), 
 action = {}) {
   switch (action.type) {
               case Constants.SET_FOO:
        return update(state, {

          sheet: {
            stream: {
              appeal_0: {
                issues: {
                  problem1: {
                    foo: {
                      $set: action.payload.foo
                    }
                  }
                }
              }
            }
          }
        });

        case Constants.SET_BAR:
        return update(state, {
          // TODO make reusable for all issues fields
         sheet: {
            stream: {
              person: {
                issues: {
                  problem1: {
                    bar: {
                      $set: action.payload.bar
                    }
                  }
                }
              }
            }
          }
        });
   default: return state;
  }
 };

我要添加很多这些内容,如何以更好的方式抽象对象的嵌套

我在想类似return newState类型的东西。我真的不明白联合减速机是否属于这种类型的东西。 redux文档很难理解,因此我需要一个更好的例子来组织减速器。 感谢

1 个答案:

答案 0 :(得分:0)

combineReducers绝对是最佳选择。您也可以在规范化和扁平化状态方面取得一些成功,以便更容易使用。

所以你可能想要

const appReducer = combineReducers({
    streams: streamReducer,
    people: peopleReducer,
    issues: issueReducer
});

然后你的组件可以在mapStateToProps中获取他们想要的各个位,而不是获得一个巨大的大对象:

function mapStateToProps( state, ownProps ) {
    return {
        person: state.people[ ownProps.personId ]
        issues: state.issues[ ownProps.personId ]
    };
}