How can I return immutable data from redux reducer?

Question

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 = [], action) {
    switch(action.type) {
        case 'ITEMS':
            return [...action.data]
        default:
            return state
    }
}

And this is my loop code :

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

now every things work right, but after change on props with this method :

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

and after loading again items I have this error :

TypeError: Cannot read property 'first' of undefined

Apparently the items did not copy with spread syntax in my reducer and all changes override on that. after executing the data load action at all the index #0 is 'empty'

Thank you

How are you dispatching the action, and what is passed in action.data ? how is the data from the store passed to the component ? your problem can come from many places, please add more details — jo_va
– jo_va, Commented Apr 4, 2019 at 8:57
@Oliver I've mapped dispatch and action.data comes from my action — irbgls
– irbgls, Commented Apr 4, 2019 at 8:58

Shubham Khatri · Accepted Answer · 2019-04-04 09:00:15Z

4

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

answered Apr 4, 2019 at 9:00

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

irbgls Over a year ago

thanks, but that change method was a simple way to change props, of course, that method is not suitable to change data. I was testing immutable variable with that method :-)

Shubham Khatri Over a year ago

@irbgls in order to avoid such issues you can make use of ImmutableJS so that you don't accidently mutate props

irbgls Over a year ago

Khatari I see, but the props aren't immutable ? I've pass the data with immutable syntax, but why that isn't immutable still ?

Shubham Khatri Over a year ago

using spread syntax to update value doesn't make the props immutable, it just means that while processing ITEMS action you are doing a shallow copy of the state array. Also its a convention that props shouldn't be mutated, but they are mutable like you notice in your case.

irbgls Over a year ago

Khatari yes, that pass data with spread syntax and that's a copy of my api data. but why after clicking on button to receive data my props doesn't refresh and wants to repeat on old data? because that error message ...

Collectives™ on Stack Overflow

How can I return immutable data from redux reducer?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related