在 Redux 中清除数组状态

Question

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

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

ES6shorthand操作

{thing}

转译为

{"thing": thing}

这会导致您的情况出现语法错误，因为该键包含一个句点，并且不清楚该键应该是什么。也许你打算做这样的事情？

return {
    action: {
        payload: action.payload
    }
}

但这并没有解决手头的问题：如果你想用这个动作清除数组，你不应该将现有状态扩展到下一个状态。相反，你应该只是 return 与现有状态形状相同的东西，但在语义上具有空的含义（在这种情况下，只是一个空数组）。我想你想要的是

case "RECEIVE_THING":
    return [
        ...state,
        action.payload
    ];
case "CLEAR_THINGS":
    return [];

Answer 2

您应该在 "CLEAR_THINGS" 处理程序中只 return 和空数组：

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

由于您只想清除所有内容，因此无需引用现有状态，因此您只想将新状态设置为一个空数组。

另一件值得一提的事情是，我可能会将我的数组嵌套在一个对象中。如果您的 reducer 将来变得更加复杂，那么您将很难像现在这样添加功能，并且如果需要，这种方法将使您的应用程序变得更加复杂。当然，你总是可以添加减速器，但我喜欢通过这种方式让我的减速器更加灵活。这看起来像：

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

Answer 3

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

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

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

你想要做的总是return同一种对象，在你的例子中，是一个数组。从 return { 开始，您已经走错了路。

Answer 4

我最终在另一个 Whosebug 线程上找到了答案。

问题是因为函数 'map' 只能用于数组，不能用于对象。所以在我的图像组件中我不得不改变

this.props.filtered.map((pic)

到

this.props.filtered.filtered.map((pic)

在 Redux 中清除数组状态

Clearing an array state in Redux

javascript

reactjs

react-native

redux

react-redux