0

我正在使用 TypeScript 和redux-toolkit.

tl;博士

如何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.

有更好的方法吗？

4

2 回答 2

0

官方建议使用，typeof store.dispatch因为 Redux-Toolkitstore.dispatch已经包含ThunkDispatch. （store.dispatch如果您使用额外的中间件并将所有内容都放在一个中心位置，您可以进行扩展。）

另外，还请看一下 Redux-Toolkit 的TypeScript 文档。如果您遗漏了任何重要的内容，请打开一个问题并告诉我们:)

于 2019-12-10T21:56:58.850 回答
0

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 }))
  }
于 2019-12-04T17:30:54.190 回答