javascript - 来自对象数组的 React 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} })
    }
};

reducer

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

我已正确链接点击事件，并且操作已发送到 reducer ，(我将仅显示部分代码)

谢谢。

Answer 1

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

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

         return item;
       })
    }