嵌套的 redux 状态 - 收到错误“无法读取未定义的属性”

Question

我正在尝试对组件实施命名空间，以便我可以在不同的工作流程中重复使用操作和缩减程序。我有嵌套的状态结构。这是我的根减速器的外观

const rootReducer = combineReducers({
session: SessionReducer,
posts: PostsReducer,
form: formReducer,
employees : {
    currentPage : currentPageReducer('employees'),
    itemProperties : itemPropertiesReducer('employees'),
    items : items('employees'),
    itemsPerPage : perPageReducer('employees'),
    sortingProperty : sortReducer('employees'),
    filters : filtersReducer('employees')
}});

在组件中，状态的访问方式如下

function mapStateToProps(state, ownProps) {  
let myState = state[ownProps.namepspace];
return {
    currentPage: myState.currentPage,
    itemProperties: myState.itemProperties,
    items: myState.items,
    itemsPerPage: myState.itemsPerPage,
    sortingProperty: myState.sortingProperty,
    filters: myState.filters
};}

命名空间作为 ownProps 传递给组件，如下所示

<DataTable namespace='employees' />

这是一个示例操作

export const REFRESH_FILTERS = 'REFRESH_FILTERS'; 
export function refreshFilters(namespace) { 
return { 
  type: `${namespace}/${REFRESH_FILTERS}`
};}

这就是我的减速器的样子

let filtersReducer = (namespace) => (state = initialState, action) => {
switch (action.type) {      
    case `${namespace}/${REFRESH_FILTERS}`:
        return initialState;
    default:
        return state;
}
};

当我尝试访问“无法读取未定义的属性 currentPage”状态时，我在 mapStateToProps 函数中收到错误消息。我在这里错过了什么吗？这不是访问嵌套状态属性的正确方法吗？

Answer 1

你不能像这样嵌套减速器。要么，您需要自己调用它们，要么使用 combineReducers 函数来组合它们。试试这个作为你的根减速器，

const rootReducer = combineReducers({
    session: SessionReducer,
    posts: PostsReducer,
    form: formReducer,
    employees : combineReducers({
         currentPage : currentPageReducer('employees'),
         itemProperties : itemPropertiesReducer('employees'),
         items : items('employees'),
         itemsPerPage : perPageReducer('employees'),
         sortingProperty : sortReducer('employees'),
         filters : filtersReducer('employees')
    })
});

编辑：总结一下，您的代码中有两个问题。一个是错字（@brub 的好消息），以及 combineReducers 中的问题