Redux - InitialState - 数组与对象问题
2021-10-11
171
我的 InitialState 有问题,错误隐藏在某处。当我将 InitialState 保存在数组中时,所有这些东西都正常工作(* NOTES.TS 是一个对象数组)。但是当我尝试将其设为对象时,它似乎根本不起作用。找不到问题出在哪里……
const INITIAL_STATE: any[] = [...NOTES];
export const reducer = (state: any[] = INITIAL_STATE, action: any) => {
switch (action.type) {
case UPDATE_NOTE: {
return state.map((note) =>
note.id === action.payload.id
? {
...note,
status: "ARCHIVED",
}
: note
);
}
case CREATE_NOTE: {
return state.concat([
{
description: 'jj',
id: 12,
status: NOTE_STATUS.ACTIVE,
timestamp: CURRENT_DATE,
images: [],
username: "John Smith",
},
]);
}
default:
return state;
}
};
export default reducer;
以及选择器中的过滤器:
const globalSelector = (state: any) => state.notes;
export const selectCurrentNotes = createSelector(globalSelector, (notes) => {
return notes.filter((p: any) => p.status === NOTE_STATUS.ACTIVE);
});
但我需要向 InitialState 添加更多内容,所以我决定将其设为对象,但实际上什么都不起作用。为什么?
const INITIAL_STATE: any = {
all: [...NOTES],
description: '',
images: []
};
export const reducer = (state: any = INITIAL_STATE, action: any) => {
switch (action.type) {
case UPDATE_NOTE: {
return state.all.map((note) =>
note.id === action.payload.id
? {
...note,
status: "ARCHIVED",
}
: note
);
}
case CREATE_NOTE: {
return state.all.concat([
{
description: 'jj',
id: 12,
status: NOTE_STATUS.ACTIVE,
timestamp: CURRENT_DATE,
images: [],
username: "John Smith",
},
]);
}
default:
return state;
}
};
export default reducer;
以及选择器中的过滤器:
const globalSelector = (state: any) => state.notes.all;
export const selectCurrentNotes = createSelector(globalSelector, (notes) => {
return notes.filter((p: any) => p.status === NOTE_STATUS.ACTIVE);
});
编辑:第一个错误涉及过滤器:
TypeError: undefined is not an object (evaluating 'notes.filter')
编辑 2:过滤器中的
notes
是 Reducer 的名称,与其他名称一起存储在全局存储中。
const Reducers = CombineReducers({ Favourites, Notes, Notifications, });
2个回答
您的 Reducer 返回了不同的类型,我认为这不是您想要的。例如:
return state.all.map((note) =>
note.id === action.payload.id
? {
...note,
status: "ARCHIVED",
}
: note
);
这只是返回您状态的更新的
all
属性。相反,您可能想要:
const newAll = state.all.map((note) =>
note.id === action.payload.id
? {
...note,
status: "ARCHIVED",
}
: note
);
return {...state, all: newAll };
您需要针对 Reducer 的所有部分修复此问题,以确保每次都返回完整状态。
DemiPixel
2021-10-11
因为在您的 Reducer 中您执行了
return state.all.map
,它将使用映射的注释数组覆盖对象状态。
您需要执行
export const reducer = (state: any = INITIAL_STATE, action: any) => {
switch (action.type) {
case UPDATE_NOTE: {
return {
...state,
all: state.all.map((note) =>
note.id === action.payload.id
? {
...note,
status: "ARCHIVED",
}
: note
)};
}
case CREATE_NOTE: {
return {
...state,
all: state.all.concat([
{
description: 'jj',
id: 12,
status: NOTE_STATUS.ACTIVE,
timestamp: CURRENT_DATE,
images: [],
username: "John Smith",
},
])
};
}
default:
return state;
}
};
Gabriele Petrioli
2021-10-11