开发者问题收集

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

2017-12-20
595

我正在尝试为组件实现命名空间,以便可以在不同的工作流中重复使用操作和 Reducer。我有嵌套的状态结构。这是我的根 Reducer 的样子

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}`
};}

这是我的 Reducer 的样子

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

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

1个回答

您不能像那样嵌套 Reducer。要么您自己调用它们,要么使用 CombineReducers 函数将它们组合起来。尝试将其作为您的根 Reducer,

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 中的问题

Pubudu Dodangoda
2017-12-20