React redux - issues adding multiple items to an array in state tree object

Question

I am looking at redux and adding names to an array. The code below works (kind of!).

I have a few issues.

I know that it is advised to create a new state tree object each time the state is passed through the reducer, however I thought it should still work even if I change the state object passed in. In my code below the console.log(store.getState()); works if I use var newArr = state.names.concat(action.name); but not if I use state.names.push(action.name);
If I add another store.dispatch(action) the code doesn't work.

store.dispatch({type: 'ADD_NAME',name: 'PhantomTwo'});

Can anyone explain why this is so?

Finally, do I need to return state again outside the switch statement?

Here is the code I currently have below.

const initialState = {
    names: []
}

function namesApp(state = initialState, action) {
    switch(action.type) {
        case 'ADD_NAME':
            var newArr = state.names.concat(action.name);
            return newArr;
        default: 
            return state;
    }
}

let store = createStore(namesApp);

store.dispatch({
    type: 'ADD_NAME',
    name: 'Phantom'
});

console.log(store.getState()); //returns `["Phantom"]`

Jyothi Babu Araja · Accepted Answer · 2019-02-18 07:53:45Z

5

This is the behavior of array object mutability

Since React highly cares about state change for re-rendering, so we need to take care of mutability.

The below snippet explains the array mutability.

let x = [];

let y = x;

console.log(x);
console.log(y);

y.push("First");

console.log(x);
console.log(y);

let z = [...x]; //creating new reference

console.log(z);

x.push("Second");

console.log(x); //updated
console.log(y); //updated
console.log(z); //not updated

So for better functionality your reducer will be like

function namesApp(state = initialState, action) {
    switch(action.type) {
        case 'ADD_NAME':
            return {
                ...state, //optional, necessary if state have other data than names
                ...{
                   names: [...state.names, action.name]
                }
            };
        default: 
            return state;
    }
}

edited Feb 18, 2019 at 7:53

answered Jan 10, 2017 at 14:46

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

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

2 Comments

FlatLander Over a year ago

I think the reason was faulty prose on the first few lines

johnchar Over a year ago

I couldn't figure out how to keep in state the change for each dynamically .map()ed multiple choice checkbox(es) without overwriting the previous. This did it, thank you!

FlatLander · Accepted Answer · 2017-01-10 15:04:52Z

[].concat returns a new array. But your state was { name: [] }. Inspite of returning newly build object with new names, the code above returned the new names array.

Vanilla solution

const initialState = { names: [] };

function namesApp(state = initialState, action) {
    switch(action.type) {
        case 'ADD_NAME':
            var newArr = state.names.concat(action.name);

            return {
                ...state,
                names: newArr
            };
        default: 
            return state;
    }
}

immutability-helper

For this type of work I would use immutability-helper

import u from 'immutability-helper'; 

function namesApp(state = initialState, action) {
    switch(action.type) {
        case 'ADD_NAME':    
            return u(state, {
                names: {
                    $push: action.name
                }
            });
        default: 
            return state;
    }
}

learn how to use immutability-helper https://facebook.github.io/react/docs/update.html

Collectives™ on Stack Overflow

React redux - issues adding multiple items to an array in state tree object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related