replace an array in immutable state by new array -- react/redux

Question

I have a immutable state in reducer as:

const initialState = fromJS({
  rates: [], 
  fromDialogOpen: false, 
  mealPlans: [], 
  roomTypes: [], 
  editRateFormOpen: false, 
  rateToEdit: "", 
  selectedDate: moment().toDate(), 
  selectedRoomType: null, 
  selectedMealPlan: null 
});

I do an api call that results me either an empty array [] or array of objects

[
    0: Object { doubleRackRate: 200, singleRackRate: 120, mealPlan: "AI", … }  
    1: Object { doubleRackRate: 12, singleRackRate: 1200, mealPlan: "AI", … }
    2: Object { doubleRackRate: 12, singleRackRate: 12, mealPlan: "AI", … }
    3: Object { doubleRackRate: 12, singleRackRate: 12, mealPlan: "AI", … }             
    4: Object { doubleRackRate: 12, singleRackRate: 12, mealPlan: "AI", … }   
]

sent as action.payload for state update!

As I receive the array from API call I need to update my rates- state to the value I receive - i.e. either an empty array or the array of objects !!

How can I do this? I tried:

return Object.assign( ...state, {rates:action.payload})

But this didn't work !!

Try: return Object.assign({}, state, { rates: action.payload || [] }); . Hope your action.payload is containing the resulted data/array. — Rohan Kangale
– Rohan Kangale, Commented Jun 17, 2018 at 8:15

Jemi Salo · Accepted Answer · 2018-06-22 10:17:09Z

3

You've got the right idea, but your syntax is wrong.

Option 1

Use Object.assign to change only the rates field.

return Object.assign(state, {rates:action.payload})

Some may consider this unorthodox, since it changes state directly.

Option 2

Return a copy of state with only rates changed using spread syntax.

return { ...state, rates: action.payload }

For immutable.js

const { set } = require('immutable')
return set(state, 'rates', action.payload)

Immutable.js documentation explains it in more detail.

edited Jun 22, 2018 at 10:17

answered Jun 17, 2018 at 8:20

Jemi Salo

3,7813 gold badges18 silver badges26 bronze badges

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

5 Comments

Shrawan BK Over a year ago

This did not work for me !! I could update the array with merge as : return state .update('rates',rates=>rates.merge(action.payload)); but this is not what I desired.

Jemi Salo Over a year ago

Object.update is not a function. Are you sure state is an object?

Shrawan BK Over a year ago

I infact have state as :

const initialState = fromJS({   rates:[], 	fromDialogOpen: false, 	mealPlans: [],  roomTypes:[], 	 	editRateFormOpen:false, 	rateToEdit:"",   selectedDate:moment().toDate(),   selectedRoomType:null,   selectedMealPlan:null });

and I need to update the rates:[] only.

Jemi Salo Over a year ago

As I suspected, state is not a vanilla object, but rather an immutable.js immutable object. You had omitted this tidbit in your question. I added a solution for immutable.js users to my answer.

Shrawan BK Over a year ago

this worked for me : return state .set('rates', action.payload) though return set(state, 'rates', action.payload) gave me errors !! Thank you :)

Collectives™ on Stack Overflow

replace an array in immutable state by new array -- react/redux

1 Answer 1

Option 1

Option 2

For immutable.js

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option 1

Option 2

For immutable.js

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related