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();
};

另外，我想指出我的状态正在从挂起触发到空闲等等，但我的实际状态没有更新。

这是相同的屏幕截图：

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

Answer 1

首先，查看您的数据结构，您可能想要更新 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))

Answer 2

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

import React from 'react';
import { useState, State } from '@hookstate/core';

const Test: React.FC = () => {
  const books: State<Array<any>> = useState([
    'Harry Potter',
    'Sherlock Holmes',
    'Swiss Family Robinson',
    'Tarzon',
  ]);
  const ReorderItems = () => {
    books.set((p) => {
      const reOrderedItem = p[2];
      p.splice(2, 1);
      p.splice(0, 0, reOrderedItem);
      return p;
    });
  };

  return (
    <div>
      <ol>
        {books.map((book) => {
          return <li>{book.get()}</li>;
        })}
      </ol>
      <br />
      <button onClick={ReorderItems}>Swap Books</button>
    </div>
  );
};

export default Test;

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

2 个答案: