How Can I Return Immutable Data From Redux Reducer?

For a learning and test project, I'm trying to return immutable redux data from reducer because safe data for component. this is my reducer code : function itemsReducer(state = [],

Solution 1:

You shouldn't be mutating the props directly in component, instead dispatch an action that updates the result in reducer

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

and action creator would be

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

and reducer

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