时间戳

首页 > 解决方案 > 我不知道如何最好地将新数据放入reducer

reactjs - 我不知道如何最好地将新数据放入reducer

问题描述

目的

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

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

第二天我为这项任务而奋斗:(

先感谢您

减速器

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

标签： reactjsreduxreact-redux

解决方案

在你的减速器文件中使用这个：

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 数组组成，它们是具有颜色属性的对象，然后是具有 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;
}};

推荐阅读