类型检查动作创建者参数的动态值

Question

在我的 Redux 结构中，我有 2 个动作创建者 — set 和 add。 add 中的有效负载类型应该是 User 对象或 Post 对象，而在 set 中它应该是 string | number | boolean |一个用户对象 |一个 Post 对象 |用户数组 |帖子数组。

type Payload = string | number | boolean | User | Post | User[] | Post[];

interface SetItem {
    type: string;
    name: string;
    payload: Payload;
}

interface Add {
    type: string;
    name: string;
    payload: User | Post;
}

export const set = (name: string, payload: Payload): SetItem => ({
    type: 'SET',
    name,
    payload,
});

export const add = (name: string, payload: User | Post): Add => ({
    type: 'ADD',
    name,
    payload,
});

在我的reducer中，我在Action接口中合并了两种类型。

type Payload = string | number | boolean | User | Post | User[] | Post[];

interface Action {
    type: string;
    name: string;
    payload: Payload | (User | Post);
}

function reducer(state: State, action: Action): State {
    if (action.type === 'SET') {
        let property: Payload = state[action.name];

        property = action.payload;

        return state;
    }

    if (action.type === 'ADD') {
        const property: (User | Post)[] = state[action.name];
        const payload: User | Post = action.payload;

        property.push(payload);

        return state;
    }

    return state;
}

您会注意到，在第二个if 语句中，我声明了一个payload 变量并将其类型设置为User | Post，但错误表明：

Payload 类型不能分配给User | Post 类型。

或者我输入检查初始状态的方式可能与错误有关。

interface State {
    [index: string]: User[] | Post[];
    users: User[];
    posts: Post[];
}

const state: State = {
    users: [],
    posts: [],
};

在对不同操作中具有不同类型的有效负载值进行类型检查时，我需要帮助。

Answer 1

您需要执行类型保护，因为此时action.payload 仍可能是string | number | boolean | User[] | Post[]。您可以通过定义两种不同的 Action 类型来做到这一点，通过检查 action.type 可以将其缩小到一种或另一种：

interface SetAction {
    type: 'SET';
    name: string;
    payload: Payload;
}

interface AddAction {
    type: 'ADD';
    name: string;
    payload: User | Post;
}

type Action = SetAction | AddAction;

function reducer(state: State, action: Action): State {
    if (action.type === 'SET') {
        // We DEFINITELY have a SetAction here
        let property: Payload = state[action.name];

        property = action.payload;

        return state;
    }

    if (action.type === 'ADD') {
        // We DEFINITELY have an AddAction here
        const property: (User | Post)[] = state[action.name];  // is this safe?
        const payload = action.payload;

        property.push(payload);

        return state;
    }

    return state;
}

Playground