Redux嵌套状态设计

时间:2017-02-18 15:46:25

标签: redux

目前正处于一个越来越复杂的状态,我想知道我是否做错了,请参阅下面的一个减速机我正在使用的例子。

case RECEIVE_DEPARTMENT_DAYDATA: 
    return {
        ...state,
        departments: {
            ...state.departments,
            [action.payload.targetDepartment]: {
                ...state.departments[action.payload.targetDepartment],
                dayData: {
                    ...state.departments[action.payload.targetDepartment].dayData,
                    [action.payload.day]: {
                        ...state.departments[action.payload.targetDepartment].dayData[action.payload.day],
                        [action.payload.targetField]: {
                            ...action.payload.data,
                            isFetching: false,
                            receivedAt: new Date(),
                            didInvaldiate: false,
                            didCall: true
                        }
                    }
                }
            }
        }
    };

将dayData移动到它自己的减速机是否更好或者没有区别?

2 个答案:

答案 0 :(得分:4)

我的建议是将你的州恢复正常状态。

你应该看看:https://github.com/paularmstrong/normalizr 请参阅关于规范化还原状态的Dan Abramov关于egghead的视频:https://egghead.io/lessons/javascript-redux-normalizing-api-responses-with-normalizr

这个egghead课程是我学到的关于如何管理redux状态的最重要的事情之一,我强烈建议看到它并阅读更多有关此事的内容。

最近Twitter发布了他们的反应和redux移动网站,有一篇文章剖析了他们的状态,这可能也是一个有趣的读物:https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1#.2e55tu6wb

答案 1 :(得分:1)

您的不可变嵌套数据更新示例是正确的。但是,@ Canastro也是正确的 - 这是标准化的良好候选者。

我们建议您仔细阅读Redux文档中的http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-nested-datahttp://redux.js.org/docs/recipes/StructuringReducers.html以及Redux Techniques#Normalization React/Redux links list部分中的一些文章。