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

将此内容添加到reducer时，您不确定是否所有这些代码都应保留在reducer中：

 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

应该在减速器中完成

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

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),
}

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

2 个答案: