使用 react-redux 和 typescript 调度操作时，无法访问减速器中有效负载的属性答案

【问题标题】：Cannot get access to properties on payload in the reducers when dispatching actions using react-redux and typescript使用 react-redux 和 typescript 调度操作时，无法访问减速器中有效负载的属性
【发布时间】：2020-10-31 04:27:30
【问题描述】：

在我的减速器中，我想访问有效负载属性来更新存储，但 Typescript 似乎抱怨我要访问的属性的类型。

//_constants.ts

export const resultsConstants = {
  STORE_RESULT: "STORE_RESULT",
  DELETE_RESULT: "DELETE_RESULT",
};

//_actiontypes.ts

import { resultsConstants } from "../../_constants";

export interface StoreResult {
  type: typeof resultsConstants.STORE_RESULT;
  payload: { value: number };
}

export interface DeleteResult {
  type: typeof resultsConstants.DELETE_RESULT;
  payload: {
    id: string;
  };
}

//results.actions.ts 调度

export const storeResult = (val: number) => {
  return (dispatch: Dispatch<StoreResult>) => {
    dispatch({
      type: resultsConstants.STORE_RESULT,
      payload: { value: val },
    });
  };
};

export const deleteResult = (id: string) => {
  return (dispatch: Dispatch<DeleteResult>) => {
    dispatch({ type: resultsConstants.DELETE_RESULT, payload: { id: id } });
  };
};

export type ResultActionTypes = StoreResult | DeleteResult;

// reducer.ts

const initialState: StoredResults = {
  results: [],
};

export const results = (
  state = initialState,
  action: ResultActionTypes
): StoredResults => {
  switch (action.type) {
    case resultsConstants.DELETE_RESULT:
      return state;
    case resultsConstants.STORE_RESULT:
      const oldState = { ...state };
      oldState.results = state.results.concat(action.payload.value); /* cannot access this value here */
      return { ...state };
    default:
      return state;
  }
};

这是我从 TS 得到的错误：

Property 'value' does not exist on type '{ value: number; } | { id: string; }'.
  Property 'value' does not exist on type '{ id: string; }'.ts(2339)

即使我在 results.actions.ts 文件中组合了动作类型，它仍然抱怨value 属性在调度函数传递的动作类型上不存在。

非常感谢任何有关如何以不同方式进行操作的帮助或建议！

谢谢！

编辑

通过进一步将动作类型接口拆分为有效负载接口，并在减速器中对有效负载进行类型转换，我得到了这个工作：

// results.types.ts

export interface StoreResultPayload {
  value: number;
}

export interface StoreResultType {
  type: typeof resultsConstants.STORE_RESULT;
  payload: StoreResultPayload;
}

// results.reducer.ts

const val = action.payload as StoreResultPayload;
oldState.results = state.results.concat(val.value);

这对我来说仍然是一种解决方法。由于动作类型与联合运算符相结合，打字稿不应该能够推断出有效负载吗？

【问题讨论】：

标签： typescript ionic-framework redux react-redux dispatch

【解决方案1】：

试试这个，看看它是否有效

interface StorePayload {
  value: number;
}

interface DeletePayload {
  value: string;
}

export interface StoreResult {
  type: string;
  payload: StorePayload
}

export interface DeleteResult {
  type: string;
  payload: DeletePayload;
}

【讨论】：

是的，这可以在 reducer 中使用更多代码。在访问 action 类型的属性之前，我将 action.payload 转换为特定的 Payload 接口。将使用更改的行编辑问题。但这对我来说似乎仍然是一种解决方法。由于动作类型接口是使用联合运算符组合的，Typescript 不应该能够推断动作的属性吗？
我认为您必须使用接口明确定义属性和类型。

【解决方案2】：

对有效负载对象进行类型转换（告诉 Typescript：“相信我，我知道我在做什么”）是我目前能找到的唯一解决方法。请参阅问题的编辑版本以获取答案。

【讨论】：