2017-12-17 9 views
3

나는 감속기가 있고 statearray에있는 1 개의 품목을 새롭게하는 것을 시도한다. 다음과 같이 보입니다 :redux가있는 상태의 항목 1 개를 업데이트하는 방법은 무엇입니까?

const players = (state = [{name:'John',nrGames:0,nrWins:0},{name:'Ed',nrGames:0,nrWins:0},{name:'Mark',nrGames:0,nrWins:0}], action) => { 
    switch (action.type) { 

     case 'ADD_PLAYER': 
      return [...state,{name:action.name}] 

     case 'ADD_WIN': 
      return [...state, action.name == 'bla' ? {nrWins:10} : {} ] 

     default: 
      return state; 
    } 
}; 

export default players; 

특정 이름에 대한 nrWins 등록 정보를 변경하는 방법을 알아 내려고하고 있습니다. 따라서 ADD_WIN이 name = 'John'으로 전달되면 John 객체를 업데이트하는 방법과 nrWins 속성을 상태 1의 다른 객체가 아닌 방법으로 업로딩하는 방법은 무엇입니까?

답변

3

플레이어에 대해 .map이 필요하고 플레이어를 찾을 때 업데이트 된 승리 횟수로 새 플레이어가 생성됩니다. 가독성을 위해 incWinForPlayer이라는 함수를 만들었습니다.

const incWinForPlayer = (name) => (player) => { 
    return player.name === name 
    ? {...player, nrWins: player.nrWins + 1} 
    : player 
}; 

const players = (state, action) => { 
    switch (action.type) { 
    case 'ADD_PLAYER': 
     return [...state, {name: action.name}] 
    case 'ADD_WIN': 
     return state.map(incWinForPlayer(action.name)); 
    default: 
     return state; 
    } 
}; 

export default players; 
0

은 "추천"접근 방식은 슬라이스 수정 하나 그것을 CONCAT 새 항목까지 기존의 배열에, 그리고 배열의 나머지를 CONCAT.

조치로 인해 완전히 새로운 항목과 수정하려는 색인이 반환되는지 확인하십시오. 같은

뭔가 :

case 'ADD_WIN': 
    return [ 
    ...array.slice(0, action.index), 
    action.item, 
    ...array.slice(action.index) 
    ]; 

편집 1 : 소스 https://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html#inserting-and-removing-items-in-arrays