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

Posted 2023-02-22

【中文标题】redux-toolkit 在来自另一个 thunk reducer 的同一切片中使用 actionCreater

【英文标题】：redux-toolkit use an actionCreater in the same slice from another thunk reducer

【发布时间】：2020-04-14 07:38:06

【问题描述】：

我有一个使用 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: /* */ ))
        
      ,
      // ...
    
  )

【参考方案1】：

我错过了有关切片无法使用 thunk 的部分文档。无论哪种方式，它都不会起作用，因为 thunk 动作不会映射到减速器，而是将其他动作分派到多个其他减速器/动作。

我在创建切片后向切片操作添加了 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