我怎样才能不可变地更新 state。 反应，redux，redux-toolkit

Question

我正在学习 redux，我有一个方法addPosts可以将帖子添加到帖子列表中，我正在这样做。

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

var initialState = [{ number: 1 }, { number: 2 }, { number: 3 }, { number: 4 }];

export const postsSlice = createSlice({
  name: "postsSlice",
  initialState,
  reducers: {
    addPost: (state, action) => {
      state = [...state, action.payload];
    },
  },
});

export const allPosts = (state) => state.posts;

export const { addPost } = postsSlice.actions;
export default postsSlice.reducer;

并像这样使用 state。

import { useSelector, useDispatch } from "react-redux";
import { addPost, allPosts } from "./postsSlice";

function Posts() {
  var posts = useSelector(allPosts);
  var dispatch = useDispatch();

  return (
    <div>
      {posts.map((post) => (
        <div>{post.number}</div>
      ))}

      {/* add post */}

      <button
        onClick={() => {
          dispatch(addPost({ number: 1 }));
          console.log(posts);
        }}
      >
        addpost
      </button>
    </div>
  );
}

export default Posts;

使用state.push(action.payload)以某种方式工作，尽管文档说不要像这样使用更新 state，并以不可变的方式更新。 像这样state = [...state, action.payload] 。 它不会以这种不可变的方式更新 state。

我不知道我在做什么错。 提前感谢您的帮助

Answer 1

You are misreading the wrong documentation for the wrong tool it seems - in a Redux Toolkit createSlice reducer, it is always 100% correct to use something like state.push to mutably modify the object in the state variable.

但是，您不能做的是您在这里尝试的：重新分配state变量。 这对任何类型的 Redux 减速器都没有任何影响，除非您稍后返回该state变量。

如果您想这样做，您将需要return [...state, action.payload]并完全保留state变量 - 它不应该被重新分配。

但推荐的方式是推动。

有关更多信息，请阅读使用 Immer 编写减速器

Answer 2

按照这个而不是直接更改为state您可以通过这种方式返回

return [...state, action.payload]

取决于您对initialState的定义

请查看react-redux-toolkit-slice-example 的工作示例

下面是切片的定义

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

const initialState = [{ number: 1 }];

export const postsSlice = createSlice({
  name: "postsSlice",
  initialState,
  reducers: {
    addPost: (state, action) => {
      return [...state, action.payload];
    }
  }
});

export const allPosts = (state) => state.posts || [];

export const { addPost } = postsSlice.actions;
export default postsSlice.reducer;

在 store 中定义 reducer(postSlice)

import { configureStore } from "@reduxjs/toolkit";
import postsReducer from "../features/posts/postsSlice";

export default configureStore({
  reducer: {
    posts: postsReducer
  }
});

在组件中使用切片

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { addPost, allPosts } from "./postsSlice";

const Posts = () => {
  var posts = useSelector(allPosts);
  var dispatch = useDispatch();

  return (
    <div>
      {posts.map((post, key) => (
        <div key={key}>{post.number}</div>
      ))}

      {/* add post */}

      <button
        onClick={() => {
          dispatch(
            addPost({
              number: Math.max(...posts.map(({ number }) => number)) + 1
            })
          );
          console.log(posts);
        }}
      >
        Add Post
      </button>
    </div>
  );
};

export default Posts;