如何将接口键入为Dispatch<Action>？

Question

我正在尝试制作一个具有 dispatch 功能的界面，但我没有使用 Redux。

interface DispatchProps {
  dispatch: (action: { type: string }) => void;
}

export function numberAddTwo({ dispatch }: DispatchProps) {
  dispatch({ type: '@addTwoToNumber' })
}

但是当我在这里调用函数时

const [state, dispatch] = useReducer(reducer, initialState);
<button className="btn" onClick={() => numberAddTwo(dispatch)}>+2</button>

调度参数出现错误

Argument of type 'Dispatch<Action>' is not assignable to parameter of type 'DispatchProps'.
  Property 'dispatch' is missing in type 'Dispatch<Action>' but required in type 'DispatchProps'.ts(2345)

我试图找到 Action 接口，但我猜那是一个通用类型。

Answer 1

您可以使用 React 提供的 Dispatch 类型作为参数类型，然后传递一个可区分的联合类型 Action，它可以包含所有将更新 reducer 状态的操作：

import { Dispatch, useReducer } from "react";

const ADD_TWO_TO_NUMBER = "@addTwoToNumber"

type Action = | { type: typeof ADD_TWO_TO_NUMBER }

function numberAddTwo(dispatch: Dispatch<Action>) {
  dispatch({ type: ADD_TWO_TO_NUMBER })
}

这是它与应用程序代码一起工作的示例：

import { Dispatch, useReducer } from "react";

const ADD_TWO_TO_NUMBER = "@addTwoToNumber"

type Action = | { type: typeof ADD_TWO_TO_NUMBER }

type State = { number: number };

function numberAddTwo(dispatch: Dispatch<Action>) {
  dispatch({ type: ADD_TWO_TO_NUMBER })
}

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ADD_TWO_TO_NUMBER:
      return { ...state, number: state.number + 2 };
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, { number: 1 })

  return (
    <div className="App">
      {state.number}
      <button className="btn" onClick={() => numberAddTwo(dispatch)}>+2</button>
    </div>
  );
}

如何将接口键入为Dispatch<Action>？

How type the interface as Dispatch<Action>?

typescript

dispatch

use-reducer