我不知道如何最好地将新数据放入减速器中

Question

目的

将新的Name和Color对象添加到state.book数组，而不删除过去的数据

.不允许推。你不能改变状态，这让我很困惑

第二天我与任务斗争：(

提前感谢

减速器

const initialState = {
book: [
{
name: "Name",
color: "#5236C1",
list: [
{
title: "Author",
about: "Created by.",
imgLink: "link",
url: "linkRead"
}
}
] 
};
const newcat = (state = initialState, action) => {
switch (action.type) {
case "ADD_CATEGORY":
return AddCategory(state, action.title, action.color);
default:
return state;
}
};
export default newcat;

测试

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { addCat } from "../actions/addCat";
const Test = () => {
const store = useSelector((state) => state.newcat);
console.log(store);
const dispatch = useDispatch();
const clickHandler = () => {
let title = "A";
let color = "#325125";
dispatch(addCat(title, color));
};
return (
<div onClick={clickHandler}>
<h1>Hello</h1>
</div>
);
};
export default Test;

操作

export const addCat = (title, color) => ({
type: 'ADD_CATEGORY',
title,
color
});

Answer 1

在reducer文件中使用以下内容：

const newcat = (state = initialState, action) => {
switch (action.type) {
case "ADD_CATEGORY":
return {...state, book:[...state.book, {color:action.color, title:action.title}]
default:
return state;
}};

你能详细说明你想添加的数据结构吗。我有点困惑，因为book数组由books数组组成，books数组是具有颜色属性的对象，然后是具有title属性的对象列表。您想创建一个具有自己列表项的新书对象，还是更改现有图书列表项。

此外，最佳做法是将它们作为有效负载发送，而不是在操作中传递单个属性。

以下的改变就足以实现这一点。

---

操作

export const addCat = (title, color) => ({
type: 'ADD_CATEGORY',
payload : {title, color}
});

---

还原剂

const newcat = (state = initialState, action) => {
switch (action.type) {
case "ADD_CATEGORY":
const {color, title} = action.payload
return {...state, book:[...state.book, {color, title}]
default:
return state;
}};

Answer 2

如问题中所述，推送操作会导致数组发生突变。这是因为，例如，我们有一个数组，比如

let list = [1,2,3];
list.push(4) //The output will be a list [1,2,3,4];

但是这里没有返回新的数组，并且正在更新原始数组。原始元素的这种变化就是突变。

因此，我们可以在不改变原始数组的情况下插入元素的另一种方法是使用扩散运算符。

let list = [1,2,3];
let updatedList = [...list,4];//Now list remains unchanged and updatedList will be [1,2,3,4]

此处，原始元素列表保持不变。在上述特定的还原器方法中，状态的更新可以如下

(假设状态对象的books数组包含书籍的类别，而books数组中对象内部的列表包含特定类别下的书籍，调度操作中的标题和颜色对应于书籍类别的名称和颜色(

function AddCategory(state,title, color){
return {...state,books:[...state.books,{name:title,color:color,list:[]}]}
}