使用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
    }
]

我尝试过多种方法。

在dispatch

• Wrapping中使用(id)而不是仅仅(Id)在调度中使用e.currentTarget.id，例如在(state, action) => { /* code */ }

中使用带大括号或不带大括号的还原器函数

我错过了什么？我知道这将是一个简单的解决办法，但出于某种原因，它正在逃避我。

任何帮助都是非常感谢的。

Answer 1

好的，看起来问题在于filter方法是如何工作的，它返回一个新的数组，并且一个初始的数组不会发生变异(这就是为什么我们以前一直使用过滤器来操作redux状态)，在代码中，您也显示了筛选操作的值，而不是分配给状态的任何属性，所以下面的代码应该适合您。

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

改变现有数组：

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

Answer 2

我们可以跳出框框，从另一个角度来看待它。上面的React组件实际上只是某个父组件的子组件。就我的回答而言，我假设在您的父组件中有某种形式的array.map。

因此，从该代码中，每个数组项都将有一个数组索引。您可以将该索引作为支柱传递给上面的react组件，如下所示：

const InputtedScore = ({ ...all your props, id, inputIndex }) => {
    const dispatch = useDispatch();
    // Having access to your index from the props, you can even
    // find the item corresponding to that index
    const inputAtIndex_ = useSelector(state => state.input[inputIndex])
    

    const applyStyling = () => {
        switch (arrowScore) {
            ...your style logic
        }
    };

    return (
        // you can send that index as a payload to the reducer function
        <ParentStyled id={id} onClick={() => dispatch(deleteArrow(inputIndex))} 
            ...the rest of your properties >
            <Circle className={applyStyling()}>
                {arrowScore}
                <IconStyled>
                    <IoIosClose />
                </IconStyled>
                <IoIosClose className="redCross" />
            </Circle>
        </ParentStyled>
    );
}

在通过发送项目的索引作为有效载荷删除删除操作后，您不再需要在还原器中找到该项了：

deleteMeal: (state, action) => {
    // you receive you inputIndex from the payload
    let { inputIndex } = action.payload;
    // and you use it to splice the desired item off the array
    state.meals.splice(inputIndex, 1);
    ...your other logic if any
},

Answer 3

您需要改变现有的数组。

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