何时为 redux thunk 额外的减速器更新状态或返回 action.payload？答案

【问题标题】：When to update state or return action.payload for redux thunk extra reducers?何时为 redux thunk 额外的减速器更新状态或返回 action.payload？
【发布时间】：2021-12-03 03:00:47
【问题描述】：

我了解更新商店的第一种方法，即将新帖子连接到现有帖子列表。但是返回用户列表如何将状态设置为第二张图像中的列表？我之所以这么问，是因为我似乎无法通过与帖子类似的操作来为用户实现同样的效果。

这里还有 redux 教程的链接：https://redux.js.org/tutorials/essentials/part-5-async-logic

使用concat更新帖子列表：

通过返回有效负载更新用户列表

【问题讨论】：

标签： reactjs redux redux-thunk redux-toolkit redux-store

【解决方案1】：

如果你想改变整个状态，返回数据来替换整个状态。

import { createSlice, createAsyncThunk, configureStore } from '@reduxjs/toolkit';

interface User {
  name: string;
}
const initialState = [] as User[];

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  return [{ name: 'teresa teng' }];
});

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder.addCase(fetchUsers.fulfilled, (state, action) => {
      // state = action.payload;
      return action.payload;
    });
  },
});

const store = configureStore({ reducer: { users: usersSlice.reducer } });

store.dispatch(fetchUsers());
store.subscribe(() => {
  console.log(store.getState());
  // { users: [] }, if you use `state = action.payload`
  // { users: [ { name: 'teresa teng' } ] }, if you use `return action.payload`
});

如果想对状态中的某些字段进行变异，可以直接给字段赋值（为什么？因为RTK底层使用immer）而不返回。

builder.addCase(fetchUsers.fulfilled, (state, action) => {
  state.status = 'success'
  state.posts = state.posts.concat(action.payload)
});

【讨论】：

谢谢，我知道返回有效负载如何设置整个状态...我想我更大的问题是，为什么state = action.payload 像您在上面的示例中注释掉或state = state.concat(action.payload) 不是像在另一个示例中那样在额外的减速器中工作？
从某种意义上说，如果我让我的用户状态为= { users: [] }，我可以做state.users = action.payload 或state.users = state.user.concat(action.payload) .... 如果我的初始状态我也可以做return state.concat(action.payload) 或return action.payload是 []... 但是上述注释中的方法不会更新状态。