react redux merge state with given array

Question

Lets say I have a reducer which is like :

const initialState = [
  {
    accessToken: null,
    isLoggedIn: false,
  }
]

export default function my_reducer(state = initialState, action) {
  switch (action.type) {
    case LOGIN:
        return state.merge(user: action) ---> how to handle this

and the output should be like:

[
      {
        accessToken: null,
        isLoggedIn: false,
        user: {
            name: 'some name',
            email: 'some email'
      }
    ]

In action I am getting a array which I am providing by doing JSON.stringify(response)

previous data should not be changed and new data should be updated

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

The ES6 Way

To create a new object with the state in ES6 we can use the spread operator. Like this

...
case ActionType.SUCCESS_GET_DATA : {
    let newState = { ...state, [action.uniqueKey]: action.payload };
    return state.merge(newState);
}
...

I did the uniqueKey part as a variable because you will want a unique name for your state.

IMO this syntax is much easier to understand than the Object.assign

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 13, 2016 at 7:03

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

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

Comments

madox2 · Accepted Answer · 2016-01-29 10:48:56Z

2

You can use Object.assign() function:

var state = {
    accessToken: null,
    isLoggedIn: false,
};

var user = {
    name: 'some name',
    email: 'some email'
};

var newState = Object.assign({}, state, {user});

console.log(newState);

edited Jan 29, 2016 at 10:48

answered Jan 29, 2016 at 10:45

madox2

52.3k21 gold badges106 silver badges101 bronze badges

1 Comment

gor181 Over a year ago

newState is mutated if you assign new property to state at later stage. Hence first to assign should be an empty object literal.

gor181 · Accepted Answer · 2016-01-29 11:06:02Z

1

First I see that your state is actually an array, but I think you would need an object right?

So it would be:

const initialState = {
    accessToken: null,
    isLoggedIn: false,
}

(requires Babel) So with spread operator you can:

return {
    ...initialState,
  user: {
    name: '...',
    surname: '...'
  }
};

Or if you do not transpile via Babel alike:

return Object.assign({}, initialState, {
    user: {
    name: '...',
    surname: '...'
  }
});

edited Jan 29, 2016 at 11:06

answered Jan 29, 2016 at 10:45

gor181

2,0682 gold badges15 silver badges12 bronze badges

3 Comments

gamer Over a year ago

gives invalid token on ...initialState

gor181 Over a year ago

@gamer you need to use Babel to use the spread operator ... So if you do not use it check the Object.assign example. More about babel at babeljs.io/docs/learn-es2015

gamer Over a year ago

I used Object.assign method but its returning me object.. while expecting array.. I have changed the state to object but also giving me same error...

vettijack · Accepted Answer · 2018-06-16 09:03:29Z

0

Using ES6 spread syntax

...
case 'ACTION_TYPE_A': {
return { ...state, action.key: action.value };
}
...

This will return the merged state by updating the 'key' if it exists in the original state.

answered Jun 16, 2018 at 9:03

vettijack

156 bronze badges

Comments

Rishav Kumar · Accepted Answer · 2019-01-11 09:17:45Z

0

Everything according to new Es6 format : )

A total addToDo reducer function where the data is appended to the previous state. And you get the output of a new state data : )

export const addToDo = (state, action) => {
const { name, email, phone, image,key } = action;
  var data = [...state.data];
  var newData = {
     name: name, email: email, phone: phone, image: image,key:key 
  }
   data.push(newData)

return(
state.merge({
  data : data
})

)};

Happy coding.

answered Jan 11, 2019 at 9:17

Rishav Kumar

5,5302 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

react redux merge state with given array

5 Answers 5

The ES6 Way

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

The ES6 Way

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related