Redux 不更新状态答案

【问题标题】：Redux not updating stateRedux 不更新状态
【发布时间】：2018-11-10 09:15:54
【问题描述】：

即使在更新了 props 之后，Redux 也不会更新组件。我有一个数据，其中包含lists，每个列表都可以包含cards，也可以包含lists（如文件夹内的文件夹）。 cards 和 lists 基本上是一个对象数组。这是一个示例数据-

"data": [
    {
        "name": "new list",
        "id": 31,
        "created_at": "2018-11-07 17:48:10+05:30",
        "lists": [],
        "cards": [
            {
                "name": "new call",
                "id": 8,
                "display_order": 0,
                "due_at": null,
                "user_list_id": 31,
                "description": null,
                "created_at": "2018-11-08T16:34:14+05:30",
                "labels": null
            },
            {
                "name": "testing",
                "id": 9,
                "display_order": 2,
                "due_at": null,
                "user_list_id": 31,
                "description": null,
                "created_at": "2018-11-08T20:07:12+05:30",
                "labels": null
            },
            {
                "name": "new card",
                "id": 7,
                "display_order": 3,
                "due_at": null,
                "user_list_id": 31,
                "description": null,
                "created_at": "2018-11-08T16:34:09+05:30",
                "labels": null
            }
        ]
    },
    {
        "name": "rename",
        "id": 29,
        "created_at": "2018-11-04 20:03:54+05:30",
        "lists": [],
        "cards": [
            {
                "name": "testing",
                "id": 1,
                "display_order": 0,
                "due_at": null,
                "user_list_id": 29,
                "description": null,
                "created_at": "2018-11-08T16:23:40+05:30",
                "labels": null
            },
            {
                "name": "testing again",
                "id": 2,
                "display_order": 1,
                "due_at": null,
                "user_list_id": 29,
                "description": null,
                "created_at": "2018-11-08T16:23:45+05:30",
                "labels": null
            }
        ]
    }
]

现在，在我删除一张卡片后，我会像这样从列表中删除这张卡片。

    const lists = this.props.lists;
    const foundAt = lists.findIndex(e => parseFloat(e.id) === parseFloat(listId));
    let cards = lists[foundAt]['cards'];
    const cardFoundAt = cards.findIndex(e => parseFloat(e.id) === parseFloat(cardId));
    cards.splice(cardFoundAt, 1);
    lists[foundAt]['cards'] = cards;
    this.props.rearrangeList(lists);

在我的行动中，我有这个-

export const rearrangeLists = (lists) => {
return {
    type: REARRANGED_LISTS,
    payload: lists
};
};

在我的减速器中，我有这个-

...
case REARRANGED_LISTS:
        return {
            ...state,
            lists: action.payload
        };
...

我不知道我在哪里做错了。呈现列表的组件不显示更新版本，但在component 的render 函数中，当我执行console.log(this.props.lists) 时，我看到它显示的是更新版本，但在页面上却没有不要更新它。我真的很无知。请帮忙。提前感谢您的帮助。

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

您的 reducer 应该处理从您的数组中删除项目。

case REMOVE_ITEM:
      return data.filter(item => item.id !== payload.item_id)

你应该有一个与此类似的减速器。您的日期会从 redux 状态传递给您的组件。

【讨论】：

【解决方案2】：

发布此想法，认为会对此有所帮助。这里的问题是它是一个对象数组，其中包含嵌套的对象数组。数据结构本身对于 redux 来说是有问题的，这就是为什么使用像 normalizer 这样的东西会让生活变得更轻松。但是，您仍然可以使用自己的方法解决此问题。这是我在减速器中所做的。我发送了我想从listId 中删除的cardId

            let {lists} = state;
            const foundAt = lists.findIndex(e => e.id === listId);
            return {
                ...state,
                lists: [
                    ...lists.slice(0, foundAt),
                    {
                        ...lists[foundAt],
                        cards: lists[foundAt]['cards'].filter(e => e.id !== cardId)
                    },
                    ...lists.slice(foundAt + 1)
                ]
            };

我希望这会有所帮助。

【讨论】：