将类型正确传递给 Redux reducer

Question

我在使用 Typescript 的 Redux 的 reducer 函数中尝试将正确的类型传递给我的操作属性时遇到了一些困难。在常规的 es6 语法中，我会传入这样的类型：

action: {}

但是在 Typescript 中是针对更具体的操作类型，所以我尝试了这样的操作：

import {
  UPDATE_STATE,
} from '../constants/ActionTypes';

import * as Actions from '../actions/index.js';

const initialState = {
  someState: '',
}

// TODO: Type checking here is throwing an error

export default function counter(state = initialState, action : Actions ) {
  switch(action.type) {
    case UPDATE_STATE:
      return {
        ...state,
      }
    }
}

当我尝试在 Webpack 中编译时，Typescript 当前抛出此错误：

ERROR in [at-loader] ./src/reducers/numberpad.tsx:27:64 TS2304: Cannot find name 'Actions'.

操作：

index.js
import * as types from '../constants/ActionTypes'

export function update(val) {
  return { type: types.UPDATE, val }
}

常量：

export const UPDATE = 'UPDATE'

到目前为止我不知所措，我也尝试过将类型作为 "object" 传递（因为从我的操作中返回的是一个实际对象）但是，这似乎并没有得到认了。我也试过指定一种 "any" 来让它更灵活，但 TS 似乎也不喜欢那样。

对于 TS 在这些情况下检查的内容，我有点困惑。欢迎任何想法。谢谢。

Answer 1

您的操作应该是接口或类型。

您的导入是从 index.js 文件导入所有内容并将其命名为 "Actions"。

在您的 index.js 文件中，您需要声明一个类型或接口，例如

export interface IAction {
    type: string;
    data: any;
}

然后在你的reducer中，你需要：

import {IAction} from '../actions/index.js';

...然后是你的减速器：

export default function counter(state = initialState, action : IAction) {
  switch(action.type) {
    case UPDATE_STATE:
      return {
        ...state,
      }
    }
}

将类型正确传递给 Redux reducer

Passing in types properly to Redux reducer

reducers

typescript

reactjs

redux