Question

我正在使用Typescript在Angular 2中编写一些reducer逻辑，我有以下逻辑

const addOption = (state: Array<Poll>, id: number, payload: any) => {
    let pollToUpdate = {};

    state.map((poll) => {
        if(poll.poll_id == id) {
            pollToUpdate = poll;
        }
    }); 

    const newState = state.filter((elem) => {
        return elem.poll_id !== id;
    });

    pollToUpdate['options'].push(payload.new_option);

    return [...newState, Object.assign({}, pollToUpdate)];
}

基本上，我有一个对象数组，由Angular 2中的以下接口定义

export interface Poll {
    poll_id: number, 
    options: Array<{name: string, votes: number}>, 
    voter_ids: Array<number>, 
    createdBy: string
}

我正在尝试在options数组中添加一个新对象。这是减速器调用

const action = {
        type: 'ADD_OPTION', 
        payload: {
            poll_id: 1, 
            new_option: {name: 'option 3', votes: 0}
        }
    };

    const nextState = reducer(initialState, action);

reducer逻辑是否算作“不可变”。我是以正确的方式实施的吗？

Answer 1

您需要考虑以下方法。

您的减速机无缘无故重新排序投票列表。如果您想要允许用户重新排序民意调查或其他内容，则可能会出现问题
实际更改的内部数组options保持不变。

我这样做

const addOption = (state: Array<Poll>, id: number, payload: any) => {
    return state.map(poll => {
       if(poll.poll_id === id) {
          return {...poll, options: poll.options.concat(payload.new_option)}
       }
       return poll
    })
}

实现减速器的正确方法

1 个答案: