User Tools

Site Tools


using_immutable.js_in_react

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
using_immutable.js_in_react [2018/09/10 23:13]
119.94.96.186 removed
— (current)
Line 1: Line 1:
-====Using Immutable.js in React=== 
  
-[[Immutable.js Lists]] 
- 
-[[Immutable.js Maps]] 
- 
-from https://​medium.freecodecamp.org/​immutable-js-is-intimidating-heres-how-to-get-started-2db1770466d6 
- 
-===Why use Immutable?​=== 
- 
-Your data structures change predictably 
- 
-Robust data manipulation 
- 
-Concise readable code 
- 
-" 
-At Pilcro, we introduced Immutable into our applications about 12 months ago. It has been one of the best decisions we have made. Our apps are now much more readable, robust, bug-free and predictable."​ 
- 
- 
-===Installing Immutable=== 
-For a react or rails/react app, open a terminal, cd to the proper directory, and enter this command 
- 
-<​code>​ 
-yarn add immutable 
-</​code>​ 
- 
-Then in app/​javascript/​packs,​ create a new .js file. Let's call it "​immutable.js"​. Paste the following code inside it. 
-<​code>​ 
-import { Map } from '​immutable';​ 
- 
-const immutablePerson = Map({ name: '​Will'​ }); 
-const person = immutablePerson.toJS();​ 
- 
-alert(person.name);​ 
-</​code>​ 
- 
-Then, open a rails view file, and paste this code 
- 
-<​code>​ 
- 
-<div id=immutable></​div>​ 
-<%= javascript_pack_tag '​immutable'​ %> 
-</​code>​ 
- 
-Finally, run your app, and navigate to the view location 
- 
-An alert popup should appear, saying "​Will"​. If that happens, you've properly installed immutable. 
- 
-===Things to remember=== 
- 
-Data structures should be thought of as EITHER plain JavaScript OR Immutable. 
- 
-Operations on an Immutable object return the result of the operation. 
- 
-Operations on an Immutable object do not change the object itself, but instead create a new object. 
- 
- 
-===Converting into Immutable=== 
- 
-In normal JavaScript, we know two common data types: Object {} and Array []. 
- 
-To translate these into Immutable: 
- 
-Object {} becomes Map Map({}) 
- 
-Array [] becomes List List([]) 
- 
-To convert normal JavaScript into Immutable, we can use the Map, List, or fromJS functions that Immutable provides: 
- 
-<​code>​ 
-import { Map, List, fromJS } from '​immutable';​ 
- 
-// Normal Javascript 
-const person = { 
-  name: '​Will',​ 
-  pets: ['​cat',​ '​dog'​] 
-}; 
- 
-// To create the equivalent in Immutable: 
-const immutablePerson = Map({ 
-  name: '​Will',​ 
-  pets: List(['​cat',​ '​dog'​]) 
-}); 
- 
-// Or ... 
-const immutablePerson = fromJS(person);​ 
- 
-</​code>​ 
- 
-fromJS is a useful function that converts nested data into Immutable. It creates Maps and Lists in the conversion. 
- 
- 
-===Converting back from Immutable to normal JavaScript=== 
- 
-It is very simple to get your data back from Immutable to plain old JavaScript. You just call the .toJS() method on your Immutable object. 
- 
-<​code>​ 
-import { Map } from '​immutable';​ 
-const immutablePerson = Map({ name: '​Will'​ }); 
-const person = immutablePerson.toJS();​ 
-console.log(person);​ // prints { name: '​Will'​ }; 
- 
-</​code>​ 
- 
-Learn more: check out http://​untangled.io/​immutable-js-an-introduction-with-examples-written-for-humans/​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​ 
- 
-====== 
- 
-<​code>​ 
-</​code>​