CODEWITHSUNDEEP
javascriptreactjsredux
gamer
gamer

Reputation: 5863

react redux merge state with given array

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

Upvotes: 2

Views: 18541

Answers (5)

Rishav Kumar
Rishav Kumar

Reputation: 5450

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.

Upvotes: 0

vettijack
vettijack

Reputation: 15

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.

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22323

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

Upvotes: 4

gor181
gor181

Reputation: 2068

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: '...'
  }
});

Upvotes: 1

madox2
madox2

Reputation: 51841

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);

Upvotes: 2

Related Questions