redux-toolkit 在另一个 thunk reducer 的同一切片中使用 actionCreater

Question

我有一个使用 redux-toolkit 中的 createSlice 生成的 redux-thunk reducer ，名为 getOne。

getOne 从 API 获取并调度加载状态的操作，(startedLoading、finishedLoading、errorLoading )。

我还想使用结果数据调用在同一切片中创建的另一个名为 insert 的 actionCreater。或者直接从 getOne reducer 更新状态。

import { createSlice } from "@reduxjs/toolkit"
import { startedLoading, finishedLoading, errorLoading } from '../slices/loadingSlice'
const apiEndpoint = "/api/v1"
const fetchOptions = { headers: { "Content-Type": "application/json" } }

const createModelSlice = function (modelName) {
  return createSlice({
    name: modelName,
    initialState: {byId: {}},
    reducers: {
      insert: (state, action) => {
        // ...
      },
      getOne: (state, action) => async (dispatch) => {
        // ...
        try {
          const response = await fetch(/*  */)

          // How would I update the store here?

          // 1. reference the insert actionCreater somehow.
          dispatch(insert({id: id, data: response))

          // 2. construct the action manually
          dispatch({action: `${modelName}/insert`, payload: {id: id, data: response))

          // 3. Mutate the state here and rely immer. (I'm not sure exactly how that works)
          state[modelName].byId[id] = response

          dispatch(finishedLoading({ key: /* */ }))
        } catch (error) {
          dispatch(errorLoading({ key: /* */ }))
        }
      },
      // ...
    }
  })
}

Answer 1

我错过了文档中关于切片无法使用 thunk 的部分。无论哪种方式，它都不起作用，因为 thunk 操作不会映射到 reducer ，而是将其他操作分派(dispatch)给多个其他 reducer /操作。

创建切片后，我将 thunk 操作添加到切片操作中。这样我就可以引用其他操作

import { createSlice } from "@reduxjs/toolkit"
const slice = createSlice({
  name: name,
  initialState: { byId: {} },
  reducers: { /* */ }
}
slice.actions.myThunkAction = payload => async (dispatch, state) => {
  // ...
  slice.actions.nonThunkAction({ id: id, data: data})
  slice.actions.anotherNonThunkAction({ index payload.index, data: data.map( /* */ )})
}

import { createSlice } from "@reduxjs/toolkit"
import { startedLoading, finishedLoading, errorLoading } from '../slices/loadingSlice'
import encodeURLParams from '../tools/encodeURLParams'

const apiEndpoint = "/api/v1"
const fetchOptions = { headers: { "Content-Type": "application/json" } }

const createModelSlice = function (modelName) {
  const slice = createSlice({
    name: modelName,
    initialState: { byId: {} },
    reducers: {
      insert: (state, action) => {
        // ...
      },
      bulkInsert: (state, action) => {
        // ...
      },
    }
  })
  slice.actions.loadMany = payload => async (dispatch, state) => {
    dispatch(startedLoading({ key: /* */ }))
    try {
      const response = await fetch(/*  */)
      dispatch(slice.actions.insert(response))
      dispatch(finishedLoading({ key: /* */ }))
    } catch (error) {
      dispatch(errorLoading({ key: /* */ }))
    }
  }
  slice.actions.loadOne = payload => async (dispatch, state) => {
    dispatch(startedLoading({ key: /* */ }))
    try {
      const response = await fetch(/*  */)
      dispatch(slice.actions.bulkInsert(response))
      dispatch(finishedLoading({ key: /* */ }))
    } catch (error) {
      dispatch(errorLoading({ key: /* */ }))
    }
  }
  return slice
}

export default createModelSlice