如何使用 Redux 处理在 React 中添加新项目或删除现有项目

Question

我的 Redux 存储中存储了一个名为工作项的产品列表，我想添加一个操作，当用户从 UI 中选取工作项时，该操作添加新工作项或删除现有工作项。

到目前为止，我拥有的是这个workItemReducer：

import {
    FETCH_WORKITEMS_BEGIN,
    FETCH_WORKITEMS_SUCCESS,
    FETCH_WORKITEMS_FAILURE,
    SELECTED_WORKITEM
} from '../actions/workItemAction';
const initialState = {
    workItems: [{"name":'work 1'}, {"name":'work 2'}, {"name":'work 3'}],
    workItemsSelected: {},
    loading: false,
    error: null
};
export default function workItemReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_WORKITEMS_BEGIN:
            return {
                ...state,
                loading: true,
                error: null
            };
        case FETCH_WORKITEMS_SUCCESS:
            return {
                ...state,
                loading: false,
                workItems: action.payload.workItems
            };
        case FETCH_WORKITEMS_FAILURE:
            return {
                ...state,
                loading: false,
                error: action.payload.error,
                workItems: []
            };
        case SELECTED_WORKITEM:
            return {
                ...state,
                workItemsSelected: action.payload.workItem
            };
        default:
            return state;
    }
}

操作如下所示：

export const FETCH_WORKITEMS_BEGIN   = 'FETCH_WORKITEMS_BEGIN';
export const FETCH_WORKITEMS_SUCCESS = 'FETCH_WORKITEMS_SUCCESS';
export const FETCH_WORKITEMS_FAILURE = 'FETCH_WORKITEMS_FAILURE';
export const SELECTED_WORKITEM = 'SELECTED_WORKITEM';
export const fetchWorkItemsBegin = () => ({
    type: FETCH_WORKITEMS_BEGIN
});
export const fetchWorkItemsSuccess = workItems => ({
    type: FETCH_WORKITEMS_SUCCESS,
    payload: { workItems }
});
export const fetchWorkItemsFailure = error => ({
    type: FETCH_WORKITEMS_FAILURE,
    payload: { error }
});
export const selectedWorkItem = workItem => ({
    type: SELECTED_WORKITEM,
    payload: { workItem }
});

我有一个容器组件

可以分散或调用这些操作，我有点困惑添加新组件或删除现有组件的逻辑发生在哪里，无论是在容器/智能组件上还是直接在化简器中。

容器组件具有此方法：

 onWorkItemSelect = (workItem) => {
     this.props.dispatch(selectedWorkItem(workItem));
 };

任何人都可以帮助编写添加新或删除现有逻辑以及该代码应该位于何处？

Answer 1

将其

添加到化简器中可以工作，我不确定所有这些代码是否应该保留在化简器中：

 case SELECTED_WORKITEM:
        let arr = [];
        if (containsObject(action.payload.workItem, state.workItemsSelected)) {
           arr = remove(state.workItemsSelected, action.payload.workItem);
        } else {
           arr = [...state.workItemsSelected, action.payload.workItem];
        }
        return {
            ...state,
            workItemsSelected: arr
        };

Answer 2

应该在减速器中完成

添加一个时，您可以只扩展可以从化简器状态获得的当前数组

const { workItems } = state;
const { workItem } = action.payload;
return {
    // ...other stuff to return
    workItems: [...workItems, workItem],
}

删除一个

const { workItems } = state;
const { workItem } = action.payload;
return {
    // ...other stuff to return
    workItems: workItems.filter(x => x.name === workItem.name),
}