实现reducer的正确方法答案

【问题标题】：Right way to implement a reducer实现reducer的正确方法
【发布时间】：2017-10-17 21:20:47
【问题描述】：

我正在使用 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
}

我正在尝试将一个新对象添加到选项数组中。这是reducer调用

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

    const nextState = reducer(initialState, action);

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

【问题讨论】：

标签： angular redux reducers

【解决方案1】：

你需要考虑你的方法的以下时刻。

您的 reducer 无缘无故地重新排序轮询列表。如果您说要允许用户重新排序民意调查或其他内容，这可能会出现问题
实际更改的内部数组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
    })
}

【讨论】：