개체 배열에서 redux 카운터 예제를

Question

React와 Redux가 포함 된 카운터의 예제를 만들려고하지만 현재 클릭 한 항목의 상태를 업데이트 할 수 없습니다.

클릭 이벤트는 클릭 한 현재 항목의 페이로드에있는 ID를 전달합니다.

return this.props.peliculas.map(movie => { 
     return <li onClick={() => this.handleClicks(movie.id)} key= 
{movie.id}>{movie.title}</li> 
}); 

나는 이벤트를 처리 할 클래스의 기능을 가지고 :

handleClicks(peli){ 
    this.props.onLiClick(peli); 
} 

디스패치 부분 :

const mapStateToProps = state => { 
    return { 
     peliculas: state.movies.peliculas 
    } 
}; 

const mapDispatchToProps = dispatch => { 
    return { 
     onLiClick: (id) => dispatch({ type: 'ADD_CLICK', payload: {id} }) 
    } 
}; 

내가 클릭 이벤트가

const laspelis = { 
    peliculas: [{title: 'T1', id: 1, clicks: 0}, {title: 'T2', id: 2, clicks: 0}], 
    isActive: false 
}; 


export const movies = (state= laspelis, action) => { 

    switch (action.type) { 
     case 'ADD_CLICK': 

     //How to update the current item inside of the reducer? 
     // After click the current item add 1 to the clicks property 
     // If the item has id: 2 => {title: 'T2', id: 2, clicks: 1} 

     return { 
      ...state, 
      peliculas: [{title: 'Otro 1', id:1},{title: 'Otro 2', id:2}] 
     } 

     default: 
      break; 
    } 
    return state; 
}; 

감속기 올바르게 연결되고 액션이 t로 전송됩니다. 그는 감속기, (나는 단지 코드를 부분적으로 보여줄 것이다)

고마워.

Answer 1

당신은

그것은 작동

return { 
     ...state, 
     peliculas: state.peliculas.map(item => { 
     if(item.id === payload.id) { 
      return { ...item, clicks: item.clicks + 1} 
     } 

     return item; 
     }) 
    }