Question

我刚开始使用React，并开始做一个待办事项列表。它具有添加，修改（完成/挂起）和删除任务等功能。

以下是我的行动

;;pinwheel---------------------------------------
       (@test "pinwheel case 1"
              "Incorrect pinwheel function"
              (above (beside (rectangle 10 30 "solid" "blue") (rotate -90 (rectangle 10 30 "solid" "blue")))
                     (beside (rotate -270 (rectangle 10 30 "solid" "blue")) (rotate 180 (rectangle 10 30 "solid" "blue"))))
              (above (beside (rectangle 10 30 "solid" "blue") (rotate -90 (rectangle 10 30 "solid" "blue")))
                     (beside (rotate -270 (rectangle 10 30 "solid" "blue")) (rotate 180 (rectangle 10 30 "solid" "blue"))))

             1)

和我的减速机：

export const ADD_TASK = 'ADD_TASK';
export const TOGGLE_TASK = 'TOGGLE_TASK';
export const REMOVE_TASK = 'REMOVE_TASK';
export const FILTER_TASK = 'FILTER_TASK';

let todoId = 1;

export function addTask(task) {

    let todo = {
        id: todoId++,
        name: task,
        status: 0,
        visible: true
    };

    return {
        type: ADD_TASK,
        payload: todo
    };
}

export function toggleTask(id) {
    return {
        type: TOGGLE_TASK,
        payload: id
    };
}

export function removeTask(id) {
    return {
        type: REMOVE_TASK,
        payload: id
    };
}

export function filterTask(id) {
    return {
        type: FILTER_TASK,
        payload: id
    };
}

我在某处读到修改状态是reducer是一种不好的做法，但我觉得我在减速器中这样做了。任何人都可以建议在reducer中正确处理添加，删除，更新值状态的方法吗？

谢谢

Answer 1

我认为您需要两个缩减器：一个用于管理可见性内容，一个用于添加，切换和删除任务。
所以对于第二部分，我想这样做。

export const ADD_TASK = 'ADD_TASK';
export const TOGGLE_TASK = 'TOGGLE_TASK';
export const REMOVE_TASK = 'REMOVE_TASK';

let todoId = 1;

export addTask = (text) => ({
    type: ADD_TASK,
    id: todoId++,
    text
});

export toggleTask = (id) => ({
    type: TOGGLE_TASK,
    id
});

export removeTask = (id) => ({
    type: REMOVE_TASK,
    id
});

export function todosReducer(state = [], action) {
    switch(action.type) {
        case ADD_TASK : 
            return [...state, {id: action.id, text: action.text, completed: false}];
        case TOGGLE_TASK :
            return state.map(task => task.id !== action.id ? task : {...task, completed: !task.completed});
        case REMOVE_TASK :
            return state.filter(task => task.id !== action.id);
    }
    return state;
}

ReactJS修改状态数据

1 个答案: