清除Redux中的数组状态

如何在Redux中清除数组状态?我有一个空数组的初始状态，并且正在添加东西。我想有一个行动，只是清除它，我尝试了以下方法，但它给了我"意外令牌"错误关于"行动。我给CLEAR_THINGS动作的有效载荷:

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.

，它也会抛出错误

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' }。接下来，您将继续使用对象简写符号来添加更多状态，但这要求您使用单个标识符(单个单词)，但是您将使用带点的概念(限定标识符)来访问属性。你是在指示创建一个名为action.payload的属性，但这是非法的，这就是你的错误的来源。它在数组中工作的原因是因为在这种情况下只需要一个值，因为键是从数组的索引派生的。

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

你应该在你的"CLEAR_THINGS"处理程序中返回一个空数组:

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

ES6操作的简写

{thing}

transpiles

{"thing": thing}

这会导致语法错误，因为键包含一个句号，并且不清楚该键应该是什么。也许这是你想要的?

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

但这并不能解决手头的问题:如果你想用这个动作清除数组，你不应该将现有状态扩展到下一个状态。相反，您应该返回与现有状态形状相同的东西，但在语义上具有空的含义(在本例中，只是一个空数组)。我认为你想要的是

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

我在另一个stackoverflow线程中找到了答案。

这个问题是因为函数'map'只能用于数组，不能用于对象。所以在image组件中我需要修改

this.props.filtered.map((pic)

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

相关内容

最新更新

热门标签：