可以将 createAsyncThunk 中的动作创建者添加到 createSlice 中的“reducers”而不是“extraReducers”吗？答案

【问题标题】：Can action creators from createAsyncThunk be added to 'reducers' instead of 'extraReducers' in createSlice?可以将 createAsyncThunk 中的动作创建者添加到 createSlice 中的“reducers”而不是“extraReducers”吗？
【发布时间】：2021-08-17 19:38:21
【问题描述】：

在Redux Tutorial 中，由createAsyncThunk 返回的动作创建者的reducer 作为extraReducers 传递给createSlice，如下所示：

export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  // async logic
})

const todosSlice = createSlice({
  // omit unnecessary code
  extraReducers: builder => {
    builder
      .addCase(fetchTodos.pending, (state, action) => {
        state.status = 'loading'
      })
  }
})

可以将动作创建者添加到reducers 吗？例如：

//omit createAsyncThunk

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    // omit reducer cases
    fetchTodos.fulfilled = (state, action) => {
      // some code to update state based on action.payload
  }
})

文档说

我们无法处理 createSlice.reducers 字段中的那些，因为它们也会生成新的动作类型。

为什么会这样？

【问题讨论】：

reducers 属性创建一个动作并响应它。当你响应一个已经存在的动作时，你使用extraReducers。
所以这只是语义上的差异，但理论上添加到reducers 或extraReducers 都应该有效吗？

标签： javascript redux react-redux redux-thunk

【解决方案1】：

不，不可能。

reducers 字段用于定义 case reducer，并生成与这些 reducer 对应的新操作类型，这些操作类型将被命名为切片的 name。换句话说，它用于帮助在切片本身内部定义新的动作类型。

extraReducers 用于定义将运行以响应 在切片之外定义的其他操作的大小写缩减器。

createAsyncThunk 定义了新的动作类型，这些将在切片之外定义。因此，切片必须使用extraReducers 来处理这些操作。

如果来自createAsyncThunk 的动作创建者作为计算键名添加到reducers，这将最终创建重复动作类型，这些类型组合了切片name 前缀和 thunk 的动作键入字符串。这意味着当 thunk 调度它的动作时，它们不会匹配 slice 正在寻找的类型，并且 reducer 永远不会运行。

【讨论】：

为什么不能将来自createAsyncThunk 的新动作类型分派到reducers 并在reducers 中运行？仅仅是因为createSlice 已经用它的名字命名了reducers 吗？
正确。如果您尝试将 createAsyncThunk 生成的操作类型作为计算键名称传递给 reducers 对象，您最终会生成一个不同的 new 操作类型，这是双重错误的。切片永远不会响应 thunk 调度的操作。