无法在 Typescript 中调度 redux 操作

Question

我打算在 typescript 中使用 react redux 创建一个简单的计数器。

我已经通过以下方式定义了我的商店，其中包含动作和减速器，但不确定如何使用特定动作调用调度

import * as React from 'react';
import { createStore, Action, Reducer } from 'redux';

export interface CounterState {
    counter: number;
}

export enum ActionTypes {
    INCREMENT = 'increment',
    DECREMENT = 'decrement'
}

export interface IncAction { type: ActionTypes.INCREMENT }
export interface DecAction { type: ActionTypes.DECREMENT }

export type CounterAction = IncAction | DecAction;

const reducer: Reducer<CounterState> = (state: CounterState = {counter: 0}, action: CounterAction) => {
    switch (action.type) {
        case ActionTypes.INCREMENT:
            return { ...state, counter: state.counter + 1};
        case ActionTypes.DECREMENT:
            return { ...state, counter: state.counter - 1};
        default:
            return state;
    }
};

let store = createStore(reducer, { counter: 0 });

以下是我的反应组件Counter 的样子

interface IProps {}

interface IState {}

export default class Counter extends React.Component<IProps, IState> {

private unsubscribe: Function;

constructor(props: IProps, context?: any) {
    super(props, context);
}

componentDidMount() {
    this.unsubscribe = store.subscribe(() => this.render());
}

componentWillUnmount() {
    this.unsubscribe();
}

render() {
    const { counter } = store.getState();
    return (
        <div>
            <p>
                <label>Counter: </label><b>#{counter}</b>
            </p>
            <button onClick={e => store.dispatch('increment') }>+</button>
            <span style={{ padding: "0 5px" }} />
            <button onClick={e => store.dispatch('decrement') }>-</button>
        </div>
    );
}

}

我收到以下错误 -

[at-loader] 中的错误 ./src/components/Counter.tsx:63:54 TS2345：“增量”类型的参数不可分配给“AnyAction”类型的参数。

[at-loader] ./src/components/Counter.tsx:65:54 中的错误 TS2345：“减量”类型的参数不可分配给“AnyAction”类型的参数。

Answer 1

我通过这样做“修复”了这个问题：

const _ = (state: any = 0, _: AnyAction) => state;
const root = combineReducers({
    _,
    applicationStatusReducer,
    ...
});

如果你只添加一个动作类型为“AnyAction”的空reducer，似乎可以解决这个问题。

显然这实际上并没有解决根本问题，但对于满足于上述修复结果的人来说，这是一种肮脏的做法。

自行决定使用。

Answer 2

查看Action和AnyAction的实际类型定义：

export interface Action {
  type: any;
}

export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any;
}

它必须是一个对象，并且它必须有一个 type 属性而不仅仅是一个 string。

您需要一个至少返回具有type 属性的对象的操作创建器。你也可以直接传递这个对象，这是我假设你尝试做的：

store.dispatch({type: ActionTypes.INCREMENT})

我还建议使用connect HOC 将状态连接到您的组件，因为当您的商店中的计数器值发生变化时，const { counter } = store.getState(); 不会触发重新渲染。如果你想要一个更基本的例子：

...
  this.unsubscribe : () => void

  componentDidMount() {
    this.unsubscribe = store.subscribe(() => this.setState({ store.getState() }))
  }

  componentWillUnmount() {
    this.unsubscribe()
  }
...

然后通过const { counter } = this.state;render引用组件的本地状态