带有 redux-thunk 的类型安全的 useDispatch

Question

我正在使用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,
      })
    })
  }
}

这样，store 就会更新，同时允许组件直接处理响应。

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. useDispatch返回的dispatch不被识别为返回 Promise 的 function，因此 TypeScript 认为Property 'then' does not exist on type '(dispatch: Dispatch<AnyAction>) => Promise<void>'. .
2. 即使可以识别，也应该正确输入 Promise

如何解决这种情况？

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

非常感谢您的任何建议。

Answer 1

useDispatch<\/code>返回Redux 使用<\/a>的Dispatch<\/code>类型，因此您只能使用它调度标准操作。 要同时调度 thunk 操作，请将其类型声明为ThunkDispatch<\/code><\/a> （来自redux-thunk<\/code> ）。

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

例如，您可以这样键入：

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
  }, []);
  ...
}

Answer 2

我的常用设置包括类型安全的AppDispatch和类型挂钩；

import { createStore, applyMiddleware, PreloadedState, combineReducers } from 'redux';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import thunk, { ThunkDispatch } from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

const middlewares = [thunk];
const enhancer = composeWithDevTools({ /* optional actionsBlacklist, etc */ });

const reducers = combineReducers({ /* ... */ })
export type RootState = ReturnType<typeof reducers>;

export const initStore = (initState?: PreloadedState<RootState>) =>
  createStore(reducers, initState, enhancer(applyMiddleware(...middlewares)));
export const store = initStore();

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
type AppAction = ReturnType<typeof store.dispatch>;
export type AppDispatch = ThunkDispatch<RootState, any, AppAction>;
export const useAppDispatch = () => useDispatch<AppDispatch>();

请注意，它与Redux 工具包略有不同，因为您configureStore而不是combineReducers