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

Question

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;

Answer 1

你必须从不运行任何减速器中的异步逻辑：

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

Answer 2

通过理解 RTK

的 createAsyncThunk 效用解决了这个问题

在下面的代码中描述

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

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

Redux toolkit state is not updating after API response

reactjs

redux

redux-toolkit