Как я могу вернуть неизменные данные из редуктора? - PullRequest
Новая
       27

Как я могу вернуть неизменные данные из редуктора?

0 голосов
/ 04 апреля 2019

Для учебного и тестового проекта я пытаюсь вернуть неизменяемые избыточные данные из редуктора, поскольку безопасные данные для компонента.это мой код редуктора: 

function itemsReducer(state = [], action) {
    switch(action.type) {
        case 'ITEMS':
            return [...action.data]
        default:
            return state
    }
}

А это мой код цикла: 

<ul>
    {
        this.props.items.map((item) => (
            <li>{item.name.first} {item.name.last}</li>
        ))
    }
</ul>

теперь все работает правильно, но после изменения реквизита с помощью этого метода: 

change() {
    this.props.items[0] = 'empty'
}

и после повторной загрузки элементов у меня появляется эта ошибка: 

TypeError: Cannot read property 'first' of undefined

Видимо элементы не копируются с синтаксисом распространения в моем редукторе, и все изменения переопределяются на этом.после выполнения действия загрузки данных индекс № 0 становится «пустым»

Спасибо

1 Ответ

4 голосов
/ 04 апреля 2019

Вы не должны мутировать реквизиты непосредственно в компоненте, вместо этого отправьте действие, которое обновляет результат в редуктор 

change() {
    this.props.updateItem({first: 'empty'}, 0);
}

, а создатель действия будет 

const updateItem = (item, index) => {
   return {type: 'UPDATE_ITEM', item, index}
}

и редуктор

function itemsReducer(state = [], action) {
    switch(action.type) {
        case 'ITEMS':
            return [...action.data]
        case 'UPDATE_ITEM': 
            return [...state.slice(0, action.index), {...state[index], ...action.item}, ...state.slice(index+1)];
        default:
            return state
    }
}
...