오른쪽 방법 감속기

Question

내가 타이프 라이터와 각도이 일부 감속기 로직을 ​​쓰고 있어요을 구현하고 나는 기본적으로

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)]; 
} 

다음과 같은 논리를 가지고, 나는 각도에 다음과 같은 인터페이스에 의해 정의 된 개체의 배열을 가지고 2

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

그리고 옵션 배열에 새 개체를 추가하려고합니다. 여기

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

    const nextState = reducer(initialState, action); 

는 감속기 논리가 "불변"로 간주 하는가 감속기 호출을합니다. 나는 그것을 올바르게 구현하고 있는가?

Answer 1

다음과 같은 방법을 고려해야합니다.

1. 감속기는 아무 이유없이 투표 목록을 다시 정렬합니다. 사용자가 설문 조사 등을 재주문 할 수있게하려는 경우 문제가 될 수 있습니다.
2. 실제로 변경된 내부 배열 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 
    }) 
} 

처럼 만들 것