Immutable.js explained in detail

This time I will bring you a detailed explanation of Immutable.js, what are the precautions when using Immutable.js, the following is a practical case, let's take a look.

Application of Immutable.js in react + router + redux project

First introduce Immutable:

The emergence of Immutable.js originated from the idea of ​​Functional Programming, that is, all The data should be copied rather than modified directly. For related introduction, please see its official website:
https://facebook.github.io/immutable-js/

So if you have some programming experience, you can understand that Immutable is another Data structure library. It's like changing from ArrayList to LinkedList. Under Immutable.js, it is changed from JavaScript syntax's own Array (that is, []) and Object ({ }) to Immutable.List and Immutable.Map.

But after all, ArrayList and LinkedList both inherit from List, and the interfaces are relatively consistent, so it is not a big problem to replace them. However, if you want to use Immutable to replace JavaScript native, it is a little more complicated.

var map1 = Immutable.Map({a:1, b:2, c:3});var map2 = map1.set('b', 50);
map1.get('b'); // 2/* ----------------悠长悠长的分割线---------------- */var list1 = Immutable.List.of(1, 2);var list2 = list1.push(3, 4, 5);var list3 = list2.unshift(0);var list4 = list1.concat(list2, list3);

It’s complicated, but just pay more attention.

Then let’s talk about redux and router

Redux has a combineReducers method that can split Reducers. For example:

combineReducers({  user: userReducer,
  dashboard: dashboardReducer,
})

Then the question comes:
When you get state, do you use state.get('user') or state.user?

Obviously use state.user. Because combineReducers doesn't know Immutable.
(Don’t tell me to mix it. One-layer structure can be like this. What about multiple layers? What about cooperation with multiple people? If you are confused at one place, you will report errors everywhere)

So if you want to use a react + router + redux If you use Immutable in your project, you can either use it locally (if it is used locally, it will basically be very nightmare), or you can use it as a complete set.
Then look here (this guy rewrote combineReducers):
https://github.com/gajus/redux-immutable

You can rest assured if you use their combineReducers Use state.get('user').

While solving combineReducers, they also solved the problem of react-router-redux (imagine that the router is used as a routing module under the state but does not know how to use Immutable):

https://github.com/gajus/redux-immutable#using-with-react-router-redux

Having said so much, how to use it

First of all, your project is react + Standard configuration of router + redux.
Then you have to introduce Immutable.

Then you should do this:

Introduce redux-immutable

Configure the history according to the README.md of redux-immutable (Ctrl+C, Ctrl+V)

When merging all reducers, use redux-immutable's combineReducers

Use Immutable.js's Immutable.List and Immutable.Map for all data entering and exiting the state (this is the real topic)

Is there anything else I should pay attention to?

Problems with components:

The idea coming from redux is to divide components into Smart and Dumb. The Smart component is responsible for receiving data, and the Dumb component is responsible for using data and only focuses on props. So does Immutable cover Smart and Dumb?

My personal opinion is this:
Dumb components basically need to be abstracted and shared by multiple projects. It would be better if these components do not support Immutable, otherwise they will be tied to Immutable.

So, the data in Dumb is native to JavaScript, wouldn’t it mean that we cannot enjoy the benefits of Immutable?
The data has been copied to the component, so there is nothing wrong with sacrificing a little for compatibility, right?

The conclusion behind this idea is:
Container in the redux concept also performs mutual conversion between Immutable and native when connecting between state and props, and between props and dispatch. (Adapter Pattern)

When testing:

You will want to console.log the current data. Typing out Immutable.List looks very tiring. It is recommended to use console.log (imtb.toJS())

But what about when debugging?

Digression

It would be great if these features were built into JavaScript itself.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to interact with js in Android development

JS modularization-RequireJS

A graphite document style rich text editor made with Vue.js 2.0+

path to node.js Detailed explanation of modules

The above is the detailed content of Immutable.js explained in detail. For more information, please follow other related articles on the PHP Chinese website!