Question

我正在使用TypeScript和redux-toolkit开发一个Webapp。

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类型。如何正确设置更好的类型？我找不到从ThunkDispatch导入redux-toolkit的方法。

有更好的方法吗？

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键入中间件

2 个答案: