Question

Param Redux 数据未正确填充到商店

2021-05-20

117

javascript reactjs redux react-redux redux-toolkit

当我通过 Thunk 操作传递参数时，我的 Redux 存储会遇到问题。在没有参数的情况下，我的存储可以正确填充。操作已成功完成，我可以看到数据已通过操作的成功/已完成消息返回到前端，但没有迹象表明数据作为状态进入商店。

我之前有一个实例，其中数组列表在后端被错误命名，但这次并非如此。

有什么特别之处导致我的商店没有填充状态数据？

动作

export const requireUserDiveLogData = createAsyncThunk(
    'users/requireData', // action name
    // action expects to be called with the name of the field
    async (userId) => {
        // you need to define a function to fetch the data by field name
        const response = await userDiveLogList(userId);
        // what we return will be the action payload
        return response.data;
    },
    // only fetch when needed: https://redux-toolkit.js.org/api/createAsyncThunk#canceling-before-execution
    {
        // _ denotes variables that aren't used -  the first argument is the args of the action creator
        condition: (_, { getState }) => {
            const { users } = getState(); // returns redux state
            // check if there is already data by looking at the didLoadData property
            if (users.didLoadDiveLogData) {
                // return false to cancel execution
                return false;
            }
        }
    }
)

减速器

export const userSlice = createSlice({
    name: 'users',
    initialState: {
        userDiveLogList: [],
        didLoadDiveLogData: false,
    },
    reducers: {
        [requireUserDiveLogData.pending.type]: (state) => {
            state.didLoadDiveLogData = true;
        },
        [requireUserDiveLogData.fulfilled.type]: (state, action) => {
            return {
                ...state,
                ...action.payload
            }
        },
    }
})

Answer 1

您应该使用 extraReducers 而不是 reducers 来处理由 createAsyncThunk 和 createAction 函数产生的操作。

此外，Redux Toolkit 的 createReducer 和 createSlice 会在内部自动使用 Immer ，以便您使用“mutating”语法编写更简单的不可变更新逻辑。不需要自己做浅拷贝的工作。

例如

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

async function userDiveLogList(userId) {
  return { data: { userDiveLogList: [1, 2, 3] } };
}

export const requireUserDiveLogData = createAsyncThunk(
  'users/requireData',
  async (userId) => {
    const response = await userDiveLogList(userId);
    return response.data;
  },
  {
    condition: (_, { getState }) => {
      const { users } = getState();
      if (users.didLoadDiveLogData) {
        return false;
      }
    },
  }
);

const userSlice = createSlice({
  name: 'users',
  initialState: {
    userDiveLogList: [],
    didLoadDiveLogData: false,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(requireUserDiveLogData.pending, (state) => {
        state.didLoadDiveLogData = true;
      })
      .addCase(requireUserDiveLogData.fulfilled, (state, action) => {
        state.userDiveLogList = action.payload.userDiveLogList;
      });
  },
});

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

store.dispatch(requireUserDiveLogData()).then(() => {
  console.log(JSON.stringify(store.getState(), null, 2));
});

控制台里输出：

{
  "users": {
    "userDiveLogList": [
      1,
      2,
      3
    ],
    "didLoadDiveLogData": true
  }
}