即使在添加 extraReducers 后，Redux Toolkit 状态也不会更新

Question

与以前的版本相比，我对 redux 工具包的了解非常有限。我很难理解为什么我的状态没有在 getUsers 触发时得到更新。

我也添加了 extraReducers。

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchSample } from './filterAPI';

export const getUsers = createAsyncThunk(
  'primaryFilters/getUsers',
  async (dispatch, getState) => {
    console.log(getState, dispatch);
    const response = await fetchSample();
    return response;
  }
);

const primaryFiltersSlice = createSlice({
  name: 'primaryFilters',
  initialState: {
    dateFilter: {
      dates: {
        key: 'selection',
        startDate: new Date(),
        endDate: new Date(),
      },
      dummyData: null,
    },
    status: null,
  },
  extraReducers: (builder) => {
    builder
      .addCase(getUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(getUsers.fulfilled, (state, action) => {
        state.status = 'idle';
        state.dummyData = action.payload;
      })
      .addCase(getUsers.rejected, (state, action) => {
        state.status = 'failed';
      });
  },
});

export default primaryFiltersSlice.reducer;

这里是 fetchSample 函数：

export const fetchSample = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  return response.json();
};

另外，我想指出的是，我的状态正在从 pending 触发到 idle 等等，但我的实际状态并没有更新。

这是相同的屏幕截图：

我还想知道我们如何在这些 extraReducers 中记录消息。

Answer 1

出于某种原因，我可以通过将状态更新保持在底部而不是顶部来调度操作。我很想对此有更好的解释，这就是我的代码的确切修复：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchSample } from './filterAPI';

export const getUsers = createAsyncThunk(
  'primaryFilters/getUsers',
  async (dispatch, getState) => {
    console.log(getState, dispatch);
    const response = await fetchSample();
    return response;
  }
);

// export const updateDates = () => {

// }

const primaryFiltersSlice = createSlice({
  name: 'primaryFilters',
  initialState: {
    dateFilter: {
      dates: {
        key: 'selection',
        startDate: new Date(),
        endDate: new Date(),
      },
      dummyData: null,
    },
    status: null,
  },
  reducer: {
    updateDate: (state, action) => {
      console.log('Actions = ', action);
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(getUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(getUsers.fulfilled, (state, action) => {
        state.dummyData = action.payload;
        state.status = 'idle';
      })
      .addCase(getUsers.rejected, (state, action) => {
        state.status = 'failed';
      });
  },
});

export default primaryFiltersSlice.reducer;

Answer 2

首先，查看您的数据结构，您可能想要更新 state.dateFilter.dummyData，而不是 state.dummyData - 至少假设您想要匹配您的 initialState 结构。

此外，createAsyncThunk 不接受回调 dispatch, getState：正确的是

export const getUsers = createAsyncThunk(
  'primaryFilters/getUsers',
  async (arg, {dispatch, getState}) => {

（但这并没有什么区别，因为你两者都没有使用）

至于日志...只是 console.log？或者你的意思是你得到了一个 Proxz 对象？那样的话 console.log(current(state))

即使在添加 extraReducers 后，Redux Toolkit 状态也不会更新

Redux Toolkit state doesn't update even after adding extraReducers

redux-toolkit