嵌套的 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