如何为以下 contextapi 代码设置 useReducer useContext 的 Typescript 类型？

Question

我想在下面的代码中使用正确的 TS 类型，而不是任何类型。我是反应 TS 的新手，请帮助...

如何为以下上下文 API 代码设置 useReducer useContext 的打字稿类型：

import React, {createContext, Dispatch} from 'react';
import {firebaseUser} from '../@types/User';

interface Actions {
  SET_IMAGENAME: string;
  SET_USER: string;
}

export const Actions: Actions = {
  SET_IMAGENAME: 'SET_IMAGENAME',
  SET_USER: 'SET_USER',
};

function action(type: string) {
  return {type};
}

function actionPayload(type: string, payload: any) { //here
  return {type, payload};
}

export const Dispatches = {
  setImageName: action,
  setUser: actionPayload,
};

interface State {
  imgName: string;
  user: firebaseUser;
}

const initialState = {
  imgName: '',
  user: {} as firebaseUser,
};

function reducer(state = initialState, action: {type: string; payload: any}) { //here
  switch (action.type) {
    case Actions.SET_IMAGENAME:
      return {...state, imgName: 'sample image'};
    case Actions.SET_USER:
      return {...state, user: action.payload};
    default:
      return state;
  }
}

export const Store = createContext<{
  state: State;
  dispatch: Dispatch<any>; //here
}>({
  state: initialState,
  dispatch: () => null,
});

export function StoreProvider({children}: JSX.ElementChildrenAttribute): JSX.Element {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return <Store.Provider value={{state, dispatch}}>{children}</Store.Provider>;
}

任何人都可以帮助我吗？我将不胜感激？

谢谢

Answer 1

这实际上取决于有效负载可以包含什么，它可以包含您可以设置的图像或 FirebaseUser 实例的字符串payload: string | FirebaseUser

import React, {createContext, Dispatch} from 'react';
import {firebaseUser} from '../@types/User';

interface Actions {
  SET_IMAGENAME: string;
  SET_USER: string;
}

export const Actions: Actions = {
  SET_IMAGENAME: 'SET_IMAGENAME',
  SET_USER: 'SET_USER',
};

function action(type: string) {
  return {type};
}

// If payload can contain string of image or FirebaseUser instance
// it will be string | FirebaseUser
// if payload will only contain FirebaseUser instance you just need payload: FirebaseUser
export type ActionType = {
 type: string,
 payload: string | FirebaseUser
}

// If payload can contain string of image or FirebaseUser instance
// it will be string | FirebaseUser
// if payload will only contain FirebaseUser instance you just need payload: FirebaseUser
function actionPayload(type: string, payload: string | FirebaseUser ) { //here
  return {type, payload};
}

export const Dispatches = {
  setImageName: action,
  setUser: actionPayload,
};

interface State {
  imgName: string;
  user: FirebaseUser;
}

const initialState = {
  imgName: '',
  user: {} as firebaseUser,
};

// set Action type here
function reducer(state = initialState, action: ActionType) {
  switch (action.type) {
    case Actions.SET_IMAGENAME:
      // need to cast type herer
      return {...state, imgName: action.payload as string};
    case Actions.SET_USER:
      // need to cast type herer
      return {...state, user: action.payload as firebaseUser};
    default:
      return state;
  }
}

export const Store = createContext<{
  state: State;
  dispatch: Dispatch<ActionType>; //action type here
}>({
  state: initialState,
  dispatch: () => null,
});

export function StoreProvider({children}: JSX.ElementChildrenAttribute): JSX.Element {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return <Store.Provider value={{state, dispatch}}>{children}</Store.Provider>;
}