react-redux: What is the difference between state.setIn() and state.set()?

Question

I've seen the use of setIn() and set() in some react-redux code:

state.setIn(...);
state.set(...);

I've found some documentation here https://facebook.github.io/immutable-js/ But unfortunately the method is not documented in detail.

I also found some other questions: Using React's immutable helper with Immutable.js But these do not answer my question.

I understand, that it must do some immutable stuff? But what's the immutable thing here? And what's the difference between set() and setIn()? Why do we need immutable?

Both [set](https://facebook.github.io/immutable-js/docs/#/List/set) and [setIn](https://facebook.github.io/immutable-js/docs/#/List/setIn) are documented — Pavel Birukov, Dec 23 '15 at 11:22

hazardous · Accepted Answer · 2017-01-17T06:31:00.613

38

Immutable set method only sets immediate properties, I.e. direct children of the object. A setIn let's you set the value of any deep node down the data. set only takes property name. setIn takes an array of keys/index to reach down to the deeply nested element.

var basket = Immutable.Map({"milk":"yes", "flour":"no"});

basket = basket.set("flour", "yes");

basket = Immutable.Map({"fruits":{"oranges":"no"}, "flour":"no"});

basket = basket.setIn(["fruits", "oranges"], "yes");

The getIn/setIn methods are extremely useful when updating states in stores as you can use generic actions and supply the key paths to child components. They can invoke the actions passing the paths as parameters.

edited Jan 17 '17 at 06:31

answered Dec 23 '15 at 13:34

hazardous

10,627
2
40
52

Is it possible using settings to change the whole fruits object instead of only fruits.oranges ? – Dimitri Kopriwa Nov 29 '16 at 06:40
1

Yes. `basket = basket.setIn(["fruits"], Immutable.fromJS({"oranges" : "yes"}));` – hazardous Nov 29 '16 at 10:37

score 1 · Answer 2 · edited May 08 '17 at 16:08

set and setIn are one of the immutablejs method which you use to set data in a list or map object. simple example to understand this is lets say you have a this

//note that fromJS is another method which comes from immutablejs library

const iniState = fromJS({
    name:null,
    friends:fromJS({
       name:null
    }),
})

in this case you need to update the initial state with the latest then that's where you can use set and setIn methods.

iniState.set('name',"sibusiso Massango").setIn(['friends','name'],"Zweli Mathebula");

this is how you can use the set and setIn method, to find more about this you can read this docs https://facebook.github.io/immutable-js/docs/

react-redux: What is the difference between state.setIn() and state.set()?

2 Answers2

Linked