Как правильно изменить свойство элемента массива?

Question

[Иван Шульга]

Как правильно сделать, чтобы скопировал стэйт, но при этом по входящему айди менял active на противоположный?

const CHECKED_POST = 'CHECKED_POST'

let initialState = {
    checkboxes: [
        {id: 1, message: 'Встать рано утром', active: false},
        {id: 2, message: 'Скушать вкусный завтрак', active: false},
        {id: 3, message: 'Провести тренировку', active: false},
        {id: 4, message: 'Поработать', active: false},
        {id: 5, message: 'Встретиться с друзьями', active: false}
    ]
}

const todoReducer = (state= initialState, action) => {

    switch (action.type) {
        case CHECKED_POST: {
            return {
                ...state,
                checkboxes: [...state.checkboxes.filter((id) => {
                    if (id !== action.id) {
                        return {
                               //Как правильно?
                        }
                    }
                })]
            }
        }

        default:
            return state
    }
}

export const checkedPost = (id) => (dispatch) => dispatch({type: CHECKED_POST}, id)


export default todoReducer

Answer 1

[0xD34F]

state.checkboxes.map(n => n.id === action.id
  ? { ...n, active: !n.active }
  : n
)

Comments

[Yustas Alexu]

map перебирает весь массив, это довольно дорогостоящая операция при условии что массив очень большой или апдейты слишком частые. Лучше использовать findIndex или find и менять именно тот объект которые нужен.

[0xD34F]

Yustas Alexu, вот бы это "лучше" увидеть живьём. А то в документации redux'а говорят, что стейт мутировать нельзя. А react-redux добавляет - компонент будет отрендерен заново только при изменении данных. Враньё, наверное.

[Yustas Alexu]

0xD34F, я столкнулся на реальном проекте с ситуацией, когда у меня все приложение перерендеривалось просто из-за того, что у меня где-то на верхнем уровне в mapStateToProps использовался filter и map. Они возвращали новый массив каждый раз как где-то вызывался dispatch, даже если этот dispatch никак не касался того компонента. В вашем случае может произойти тоже самое, теоретически.