时间戳

首页 > 解决方案 > Redux Toolkit 中 createSlice() 中的 extraReducers

redux - Redux Toolkit 中 createSlice() 中的 extraReducers

问题描述

下面是 Codecademy 的示例代码：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { client } from '../api';
 
const initialState = {
  todos: [],
  status: 'idle'
};
 
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await client.get('/todosApi/todos');
  return response.todos;
});
 
const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    }
  },
  extraReducers: {
    [fetchTodos.pending]: (state, action) => {
      state.status = 'loading';
    },
    [fetchTodos.fulfilled]: (state, action) => {
      state.status = 'succeeded';
      state.todos = state.todos.concat(action.payload);
    }
  }
});

我对 fetchTodos.pending 和 fetchTodos.fulfilled 作为计算属性的含义感到困惑。我没有看到 fetchTodos 具有这些属性。到底是怎么回事？

标签： redux

解决方案

这些是由createAsyncThunk

查看createAsyncThunk 上的 RDK 文档

参数# createAsyncThunk 接受三个参数：字符串操作类型值、payloadCreator 回调和选项对象。

type
一个字符串，用于生成额外的 Redux 操作类型常量，表示异步请求的生命周期：

例如，'users/requestStatus' 的类型参数将生成这些操作类型：
pending: 'users/requestStatus/pending'
已完成：“用户/请求状态/已完成”
被拒绝：“用户/请求状态/拒绝”

推荐阅读