API 响应后 Redux 工具包状态未更新答案

【问题标题】：Redux toolkit state is not updating after API responseAPI 响应后 Redux 工具包状态未更新
【发布时间】：2021-11-17 00:34:34
【问题描述】：

redux 工具包的新手。

Redux reducer 在 API 响应后不更新状态，如果在 API 调用之前更新状态正常，请在下面描述我的代码

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

const initialState = {
  value: 0,
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    allUsers: (state) => {
      state.value = 2; //state is updating here
      fetch("http://bss-api.test/api/admin/users")
        .then((response) => response.json())
        .then((result) => {
          state.value = 5; //state is not updating here
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
});

export const { allUsers } = userSlice.actions;
export default userSlice.reducer;

【问题讨论】：

标签： reactjs redux redux-toolkit

【解决方案1】：

通过了解createAsyncThunk RTK 的实用程序解决了这个问题

在下面的代码中描述

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

export const getUsers = createAsyncThunk(
    'getUsers',
    async ({ limit }, { dispatch, getState }) => {
      return fetch(
        `http://bss-api.test/api/admin/users`
      ).then((res) => res.json())
    }
  )

export const userSlice = createSlice({
name:'user',
initialState:{
    list:[],
    status:null
},
extraReducers: {
    [getUsers.pending]: (state, action) => {
      state.status = 'loading'
    },
    [getUsers.fulfilled]: (state, { payload }) => {
      state.list = payload
      state.status = 'success'
    },
    [getUsers.rejected]: (state, action) => {
      state.status = 'failed'
    },
  },
});


export default userSlice.reducer

【讨论】：

【解决方案2】：

您必须从不在 reducer 中运行任何异步逻辑：

https://redux.js.org/style-guide/style-guide#reducers-must-not-have-side-effects

任何异步逻辑都属于 reducer，例如在 thunk 中：

https://redux.js.org/usage/writing-logic-thunks

此外，所有 Redux 更新都是由调度操作引起的。

我们建议使用 RTK 的 createAsyncThunk 实用程序来帮助根据请求的承诺自动定义和调度操作：

https://redux.js.org/tutorials/essentials/part-5-async-logic

【讨论】：