Реагируйте, Redux с неизменяемым. js: Невозможно получить правильные данные о состоянии при удалении одного элемента из списка.

Question

Я практикую список Todo с React 16, Redux и неизменяемым. js, однако при удалении одного элемента из списка элементов в пользовательском интерфейсе (см. Вложение). Он удалит все элементы и оставит только один, который нельзя удалить. При добавлении элемента он работает нормально, но не знаю, почему данные в состоянии ведут себя некорректно. Кто-нибудь знает, что не так с моим кодом? Большое вам спасибо за продвинутый:

import { fromJS } from  'immutable';
import * as constants from './actionTypes';

const todoState = fromJS({
        isCompleted : false,
        inputValue : '',
        list: []
})

const todoReducer = function(state = todoState, action) {

    switch (action.type) {
        case constants.ADD_ITEM: 
            const list = state.get('list');
            const inputValue = action.payload;
            return state.set('list', [...list, {inputValue, isCompleted : false}]);
        case constants.REMOVE_ITEM:  {
            const list = state.get('list');
            const index = action.payload; // works correctly
            const newList = list.splice(index, 1);
            // will delete all the items and only left one which cannot be deleted
            return state.set('list', newList);
        }
        case constants.CHECK_ITEM:
            return state;
        default:
            return state;
    }
}

export default todoReducer;

Answer 1

Значение, возвращаемое из Array.prototype.splice - это новый массив, содержащий удаленные элементы, а не оставшиеся элементы. Исходный массив видоизменен.

Вы можете достичь желаемого результата, скопировав массив, склеив копию и вернув его.

const newList = [...list];
newList.splice(index, 1);
return state.set('list', newList);