使用 redux-toolkit 打字中间件

Question

我正在使用 TypeScript 和 redux-toolkit 开发一个网络应用程序。

tl;dr

如何在中间件上设置 dispatch 参数的类型？

我需要从我的服务器获取一些数据并将其保存在我的商店中。所以我写了如下代码（简化）：

import { createSlice } from '@reduxjs/toolkit'
import { TNewOrder } from '../store'

const initialState: TNewOrder = {
  prices: [],
  // other stuffs...
}

const newOrderSlice = createSlice({
  initialState,
  name: 'new-order',
  reducers: {
    setPrices(state, action) {
      const { payload } = action

      return {
        ...state,
        prices: payload.prices
      }
    },

    updateFormData(state, action) {
      // not important...
    }
  }
})

const { setPrices, updateFormData } = newOrderSlice.actions

const fetchPrices = () =>
  async (dispatch: any) => {
    const response = await fetch('https://jsonbox.io/box_4186ae80994ed3789969/prices/5de7e570de45ab001702a382')
    const { prices } = await response.json()

    dispatch(setPrices({ prices }))
  }

export { fetchPrices, updateFormData }
export default newOrderSlice.reducer

注意，因为获取数据是一个异步任务，我不能直接放在setPrices上。所以我创建了一个名为 fetchPrices 的中间件来完成请求任务并调用 setPrices.

尽管它有效，但我对这个解决方案不满意，因为我设置了 any 类型。如何正确设置更好的类型？我找不到从 redux-toolkit.

导入 ThunkDispatch 的方法

有更好的方法吗？

Answer 1

ThunkDispatch 未由 @reduxjs/toolkit 导出。如果你想使用它，你应该从 redux-thunk 导入它。

import { ThunkDispatch } from 'redux-thunk'; 

const fetchPrices = () =>
  async (dispatch: ThunkDispatch) => {
    const response = await fetch('https://jsonbox.io/box_4186ae80994ed3789969/prices/5de7e570de45ab001702a382')
    const { prices } = await response.json()

    dispatch(setPrices({ prices }))
  }

Answer 2

official suggestion 是使用 typeof store.dispatch，因为 Redux-Toolkit 的 store.dispatch 已经包含 ThunkDispatch。（如果您使用额外的中间件并将所有内容都放在中央位置，则可以扩展 store.dispatch。）

另外，也请看看Redux-Toolkit的TypeScript documentation。如果您遗漏了任何重要信息，请打开一个问题让我们知道:)

使用 redux-toolkit 打字中间件

Typing middleware with redux-toolkit

typescript

reactjs

redux

redux-toolkit