使用 redux 工具包从数组中删除值

Question

我刚开始使用“@reduxjs/toolkit”（版本“^1.5.1”）。

我正在尝试从状态数组（roundScore）中删除一个对象。使用 . 这通常是非常简单的事情filter()。由于某种原因，这不起作用，我不明白为什么。这是我的代码：

减速片：

import { createSlice } from "@reduxjs/toolkit";

export const roundScoreSlice = createSlice({
    name: "roundScore",
    initialState: {
        roundScore: [],
    },

    reducers: {
        deleteArrow: (state, action) => {
            console.log(`action.payload = ${action.payload}`); // returns correct id

            state.roundScore.filter((arrow) => arrow.id !== action.payload);
        },
    },
});

export const { deleteArrow } = roundScoreSlice.actions;

export default roundScoreSlice.reducer;

反应组件：

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import { useDispatch } from "react-redux";
import { deleteArrow } from "../../redux-reducers/trackSession/roundScoreSlice";

export default function InputtedScore({
    arrowScore,
    id,
    initial,
    animate,
    variants,
}) {
    const dispatch = useDispatch();

    const applyStyling = () => {
        switch (arrowScore) {
            case 0:
                return "miss";
            case 1:
                return "white";
            case 2:
                return "white";
            case 3:
                return "black";
            case 4:
                return "black";
            case 5:
                return "blue";
            case 6:
                return "blue";
            case 7:
                return "red";
            case 8:
                return "red";
            case 9:
                return "gold";
            case 10:
                return "gold";
            default:
                return null;
        }
    };

    return (
        <ParentStyled
            id={id}
            initial={initial}
            animate={animate}
            variants={variants}
            onClick={() => dispatch(deleteArrow(id))}
        >
            <Circle className={applyStyling()}>
                {arrowScore}
                <IconStyled>
                    <IoIosClose />
                </IconStyled>
                <IoIosClose className="redCross" />
            </Circle>
        </ParentStyled>
    );
}

添加 2 个箭头后的状态如下所示：

roundScore: [
    {
        id:"e0f225ba-19c2-4fd4-b2bf-1e0aef6ab4e0"
        arrowScore:7
    },

    {
        id:"2218385f-b37a-4f2c-a8db-4e7e65846171"
        arrowScore:5
    }
]

我尝试了多种方法的组合。

• 在调度中使用 e.target.id
• 在调度中使用 e.currentTarget.id
• 在调度中使用 ({id}) 而不是仅使用 (id)
• 使用或不使用大括号将减速器函数包裹起来，例如在内部(state, action) => { /* code */ }

我缺少什么？我知道这将是一个简单的修复，但由于某种原因它让我无法解决。

任何帮助深表感谢。

Answer 1

好吧，看起来问题在于filter方法的工作方式，它返回一个新数组，并且初始数组没有改变（这就是为什么我们之前一直使用filter来操作redux状态），也在你的代码中已显示过滤操作的值未分配给您状态的任何属性您需要分配值或变异数组，因此下面的代码应该适合您

state.roundScore = state.roundScore.filter((arrow) => arrow.id !== action.payload);

改变现有数组：

state.roundScore.splice(state.roundScore.findIndex((arrow) => arrow.id === action.payload), 1);