是否可以将 createAsyncThunk 中的动作创建者添加到 createSlice 中的 'reducers' 而不是 'extraReducers'？

Question

在 Redux Tutorial 中，createAsyncThunk 返回的动作创建者的缩减器作为 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
  }
})

文档说

We can't handle those inside of the createSlice.reducers field, because those generate new action types too.

为什么会这样？

Answer 1

不，不可能。

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

extraReducers 用于定义将运行响应 切片外定义的其他操作的 case reducers。

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

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

是否可以将 createAsyncThunk 中的动作创建者添加到 createSlice 中的 'reducers' 而不是 'extraReducers'？

Can action creators from createAsyncThunk be added to 'reducers' instead of 'extraReducers' in createSlice?

javascript

redux

redux-thunk

react-redux