reducer 中的操作类型不兼容

Question

在我的应用程序中，我有许多不同的操作可能会或可能不会影响状态的同一部分。为了简化示例，我创建了这个小代码：

// @ts-ignore
import { handleActions } from 'redux-actions';

interface Thing{
    id: number
}

interface ActionA {
    type: string;
    payload?: Thing;
}

interface ActionB {
    type: string;
    payload?: Thing[];
}

interface State {
    things: Thing[];
}


const someActionA: ActionA = {
    payload: { id: 35 },
    type: 'actionA'
};

const someActionB: ActionB = {
    payload: [{ id: 35 }],
    type: 'actionB'
};

const reducer = handleActions({
    [someActionA.type]: (state: State, action: ActionA) => state,
    [someActionB.type]: (state: State, action: ActionB) => state,
}, {things: []});

如果没有类型检查，一切都会正常工作。但是，在这种情况下，TS 编译器会抱怨。因为payload的类型不兼容。

我现在正在与类型战斗一段时间，并且每种类型都会碰到其他墙壁。 正确的解决方法是什么？

我得到的错误：

TS2769: No overload matches this call.   Overload 1 of 3,
'(reducerMap: ReducerMap<State, State>, initialState: State, options?:
Options | undefined): ReduxCompatibleReducer<State, State>', gave the
following error.     Argument of type '{ [x: string]: ((state: State,
action: ActionA) => State) | ((state: State, action: ActionB) =>
State); }' is not assignable to parameter of type 'ReducerMap<State,
State>'.       Index signatures are incompatible.         Type
'((state: State, action: ActionA) => State) | ((state: State, action:
ActionB) => State)' is not assignable to type 'ReducerMapValue<State,
State>'.           Type '(state: State, action: ActionA) => State' is
not assignable to type 'ReducerMapValue<State, State>'.
            Type '(state: State, action: ActionA) => State' is not assignable to type 'Reducer<State, State>'.               Types of
parameters 'action' and 'action' are incompatible.
                Type 'Action<State>' is not assignable to type 'ActionA'.                   Types of property 'payload' are
incompatible.                     Property 'id' is missing in type
'State' but required in type 'Thing'.   Overload 2 of 3, '(reducerMap:
ReducerMap<State, Thing | undefined>, initialState: State, options?:
Options | undefined): ReduxCompatibleReducer<State, Thing |
undefined>', gave the following error.     Argument of type '{ [x:
string]: ((state: State, action: ActionA) => State) | ((state: State,
action: ActionB) => State); }' is not assignable to parameter of type
'ReducerMap<State, Thing | undefined>'.       Index signatures are
incompatible.         Type '((state: State, action: ActionA) => State)
| ((state: State, action: ActionB) => State)' is not assignable to
type 'ReducerMapValue<State, Thing | undefined>'.           Type
'(state: State, action: ActionB) => State' is not assignable to type
'ReducerMapValue<State, Thing | undefined>'.             Type '(state:
State, action: ActionB) => State' is not assignable to type
'Reducer<State, Thing | undefined>'.               Types of parameters
'action' and 'action' are incompatible.                 Type
'Action<Thing | undefined>' is not assignable to type 'ActionB'.
                  Types of property 'payload' are incompatible.                     Type 'Thing | undefined' is not assignable to type 'Thing[] | undefined'.                       Type 'Thing' is missing
the following properties from type 'Thing[]': length, pop, push,
concat, and 28 more.   Overload 3 of 3, '(reducerMap:
ReducerMapMeta<State, Thing | undefined, unknown>, initialState:
State, options?: Options | undefined):
ReduxCompatibleReducerMeta<State, Thing | undefined, unknown>', gave
the following error.     Argument of type '{ [x: string]: ((state:
State, action: ActionA) => State) | ((state: State, action: ActionB)
=> State); }' is not assignable to parameter of type 'ReducerMapMeta<State, Thing | undefined, unknown>'.       Index
signatures are incompatible.         Type '((state: State, action:
ActionA) => State) | ((state: State, action: ActionB) => State)' is
not assignable to type 'ReducerMapMeta<State, Thing | undefined,
unknown> | ReducerMeta<State, Thing | undefined, unknown> |
ReducerNextThrowMeta<State, Thing | undefined, unknown>'.
          Type '(state: State, action: ActionB) => State' is not assignable to type 'ReducerMapMeta<State, Thing | undefined, unknown>
| ReducerMeta<State, Thing | undefined, unknown> |
ReducerNextThrowMeta<State, Thing | undefined, unknown>'.
            Type '(state: State, action: ActionB) => State' is not assignable to type 'ReducerMeta<State, Thing | undefined, unknown>'.
              Types of parameters 'action' and 'action' are incompatible.                 Type 'ActionMeta<Thing | undefined,
unknown>' is not assignable to type 'ActionB'.                   Types
of property 'payload' are incompatible.                     Type
'Thing | undefined' is not assignable to type 'Thing[] | undefined'.
                      Type 'Thing' is not assignable to type 'Thing[]'. 

Answer 1

我认为这应该可行：

const reducer = handleActions({
    [someActionA.type]: (state: State, action: Action<State>) => state,
    [someActionA.type]: (state: State, action: Action<State>) => state,
}, {things: []});