时间戳

首页 > 解决方案 > 类型安全的 useDispatch 和 redux-thunk

typescript - 类型安全的 useDispatch 和 redux-thunk

问题描述

我正在redux-thunk使用异步操作创建器。结果也返回给各自的调用者。

function fetchUserName(userId: number): Promise<string> {
  return Promise.resolve(`User ${userId}`)
}

function requestUserName(userId: number) {
  return (dispatch: Dispatch) => {
    return fetchUserName(userId).then(name => {
      dispatch({
        type: 'SET_USERNAME',
        payload: name,
      })
    })
  }
}

这样，存储被更新，同时允许组件直接处理响应。

function User() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(requestUserName(1))
      .then(name => {
        console.log(`user name is ${name}`)
      })
      .catch(reason => {
        alert('failed fetching user name')
      })
  }, [])
}

这按预期工作，但由于类型无效，TypeScript 不会对其进行编译。

  1. dispatch返回的 by不useDispatch被识别为返回 Promise 的函数，因此 TypeScript 认为Property 'then' does not exist on type '(dispatch: Dispatch<AnyAction>) => Promise<void>'..
  2. 即使它会被识别出来，Promise 也应该被正确输入

这种情况如何解决？

对我来说，创建一个包装器useDispatch或重新定义类型会非常好，dispatch但我不知道在这种特殊情况下该类型应该是什么样子。

非常感谢您的任何建议。

标签： typescriptreduxredux-thunk

解决方案

useDispatch返回Redux 使用Dispatch的类型，因此您只能使用它调度标准操作。要同时调度 thunk 操作，请将其类型声明为(from )。ThunkDispatchredux-thunk

ThunkDispatch接收存储状态、额外的 thunk 参数和您的操作类型的类型参数。它允许调度 a ThunkAction，这基本上是 的内部函数requestUserName。

例如，您可以这样键入：

import { ThunkDispatch } from "redux-thunk";
import { AnyAction } from "redux";

type State = { a: string }; // your state type
type AppDispatch = ThunkDispatch<State, any, AnyAction>; 
// or restrict to specific actions instead of AnyAction

function User() {
  const dispatch: AppDispatch = useDispatch();
  useEffect(() => {
    dispatch(requestUserName(1))
      .then(...)  // works now
  }, []);
  ...
}

AppDispatch也可以从商店推断typeof store.dispatch：

import thunk, { ThunkDispatch, ThunkMiddleware } from "redux-thunk";

const mw: ThunkMiddleware<State, AnyAction> = thunk;
const dummyReducer = (s: State | undefined, a: AnyAction) => ({} as State);
const store = createStore(dummyReducer, applyMiddleware(mw));

type AppDispatch = typeof store.dispatch // <-- get the type from store

TS游乐场样本

另请参阅 redux 关于使用带有钩子的 typescript 的文档：https ://redux.js.org/usage/usage-with-typescript#define-typed-hooks

推荐阅读