javascript - 在 Redux 中清除数组状态

Question

如何在 Redux 中清除数组状态？我有一个空数组的初始状态，正在添加内容。我想要一个清除它的 Action ，我尝试了以下方法，但它给了我关于我给 CLEAR_THINGS Action 的“action.payload”的“意外 token ”错误:

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return {
            ...state,
            action.payload // payload here is []...
        };
    default:
        return state;
}}

如果我只是使用 [] 而不是通过 action.payload，它也会抛出错误。

Answer 1

export default (state=[], action) => {
switch (action.type) {
    case "RECEIVE_THING":
        return [
            ...state,
            action.payload
        ];
    case "CLEAR_THINGS":
        return [];
    default:
        return state;
}}

RECEIVE_THING 操作使用对象扩展符号返回一个状态，该状态是一个数组 ([])，其中包含先前的状态 ([...state ]) 并向其添加一个新项目 ([...state, action.payload])。用于此新项目的键/属性名称只是数组的下一个索引。毕竟，它是一个数组。

在您的 CLEAR_THINGS 代码中，您正在创建一个对象 ({})，其中包含旧状态(比如说它是 ['item1']) 所以它看起来像 { '0': 'item1' }。接下来您继续使用 object shorthand notation添加更多状态，但这需要您使用单个标识符(单个词)，但您使用的是点分概念(限定标识符)来访问属性。您是在指示创建一个名为 action.payload 的属性，但这是非法的，这就是您的错误来源。它在数组的情况下起作用的原因是因为在这种情况下只需要一个值，因为键是从数组的索引派生的。

你想要做的是始终返回相同类型的对象，在你的例子中，是一个数组。从 return { 开始，您已经走错了路。