将带有任意键的对象添加到减速器

时间:2019-12-23 13:25:20

标签: reactjs typescript redux redux-thunk

对于这种情况,我正在尝试向存储所有任务的数组中添加一个新的TaskState,其键为TaskID,值为TaskState。我不确定如何在减速器中表达这一点。另外,我不确定我的ThunkActions是否正确,但请暂时保留。

reducer.ts

export interface TaskState {
    taskID: string;
    site: string;
    input: string;
    inputType: InputTypeEnum;
    useAccount: boolean;
    profile: string;
    accountUser: string;
    accountPassword: string;
    taskStatus: TaskStatusEnum;
}

export interface TasksState {
    [taskID: string]: TaskState;
}

const defaultState: TasksState = {}; // I don't have to do anything here?

export const tasksReducer: Reducer<TasksState> = (state = defaultState, action: TasksAction) => {
    switch (action.type) {
        case ADD_TASK:
            return {
                ...state,
                action.taskID: ... // not sure about this one.
            };
        case DELETE_TASK:
            return {
                ...state,
                // need to delete a TaskState object that corresponds to a certain TaskID
            };
        default:
            return state;
    }
};

actions.ts

export const ADD_TASK = 'ADD_TASK';
export const DELETE_TASK = 'DELETE_TASK';

export interface TaskActionAdd extends Action {
    type: 'ADD_TASK';
    payload: TaskState;
}
export interface TaskActionDelete extends Action {
    type: 'DELETE_TASK';
    taskID: string;
}

export const addTask: ActionCreator<
    ThunkAction<
        Promise<TaskActionAdd>,
        TasksState,
        TaskState,
        TaskActionAdd
    >
> = (task: TaskState) => {
    return async (dispatch: Dispatch) => {
        const addTaskAction: TaskActionAdd = {
            type: ADD_TASK,
            payload: task,
        }
        return dispatch(addTaskAction);
    }
}

export const deleteTask: ActionCreator<
    ThunkAction<
        Promise<TaskActionDelete>,
        TasksState,
        TaskState,
        TaskActionDelete
    >
> = (taskID: string) => {
    return async (dispatch: Dispatch) => {
        const deleteTaskAction: TaskActionDelete = {
            type: DELETE_TASK,
            taskID,
        }
        return dispatch(deleteTaskAction);
    }
}

export type TasksAction = TaskActionAdd | TaskActionDelete;

0 个答案:

没有答案