javascript - 从对象数组 react redux计数器示例

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

我已经正确链接了click事件，并且该操作已发送到reducer，（我将仅部分显示代码）

谢谢。

最佳答案

您需要找到一个通过ID更新的项目，将其替换为新的项目，并且不要忘记更改整个数组

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

         return item;
       })
    }