Immutable.js詳解

這次帶給大家Immutable.js詳解，使用Immutable.js的注意事項有哪些，下面就是實戰案例，一起來看一下。

Immutable.js在react + router + redux專案中的應用

先介紹一下Immutable：

Immutable.js的出現源自於Functional Programming的思想，即所有資料應該是複製過來，而不是直接修改。相關介紹看它官網：
https://facebook.github.io/immutable-js/

所以如果你有一些程式設計經驗，可以理解為Immutable就是另外一個資料結構的庫。就好像從ArrayList換成LinkedList一樣。在Immutable.js下，就是從JavaScript語法自有的Array（就是[]）和Object（{ }），換到Immutable.List和Immutable.Map了。

但是ArrayList和LinkedList畢竟都繼承於List，介面上比較一致，換起來問題不大，但是想用Immutable換JavaScript原生，就要略複雜些。

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

複雜歸複雜，不過是多注意一點吧。

然後要說到redux和router

Redux有一個combineReducers方法，可以做到Reducer的拆分。例如：

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

那麼問題來了：
當你取得state的時候，你是用state.get('user')還是用state.user？

顯然要用state.user。因為combineReducers不認識Immutable啊。
（不要告訴我混用，一層結構可以這樣，多層呢？多人合作呢？一處蒙逼，處處報錯啊）

所以如果你想在一個react + router + redux的專案下用Immutable，要嘛就局部使用（局部的話，基本上會很nightmare吧），要嘛就換全套的。
然後就是看這裡（這哥們把combineReducers給重新寫了）：
https://github.com/gajus/redux-immutable

用他們家的combineReducers，你可以放心地用state.get('user')。

在解決combineReducers的同時，他們家還順帶解決了react-router-redux的問題（試想router作為state下的routing模組卻不懂用Immutable該多呵呵）：

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

說了這麼多，怎麼用呢

首先你的專案是react + router + redux的標配。
然後你要引入Immutable。

那麼你該這樣：

引入redux-immutable

按照redux-immutable的README.md把history什麼的配置好（Ctrl+C, Ctrl+V）

所有reducer合併的時候換用redux-immutable的combineReducers

所有資料出入state用Immutable.js的Immutable.List和Immutable.Map（這才是正題）

還有什麼要注意的嗎？

元件的問題：

從redux過來的想法是把元件分成Smart和Dumb。 Smart元件負責把數據接進來，Dumb元件負責使用數據，並且只專注於props。所以Immutable要覆蓋Smart和Dumb嗎？

我個人觀點是這樣的：
Dumb元件基本上都是要抽像出來給多個項目共用的。這部分組件不支援Immutable應該會更好些，否則就被綁死在Immutable上了。

那這麼說，Dumb裡的資料是JavaScript原生的，豈不是享受不到Immutable帶來的好處？
資料已經複製給了元件，為了相容性犧牲一點這個也沒啥吧？

這個想法背後的結論就是：
redux概念裡的Container在做state與props之間，props與dispatch之間的對接的時候，也同時做了Immutable與原生的相互轉換。 （Adapter Pattern吧）

測試的時候：

你會想console.log一下目前的資料吧，把Immutable.List打出來看著很累的，建議用console.log (imtb.toJS())

可是debug的時候呢？

題外話

如果這些特性是JavaScript本身內建的就好了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼在Android開發中與js互動

#JS模組化-RequireJS

一個用Vue.js 2.0+做出的石墨文檔樣式的富文本編輯器

node.js的path模組詳解

以上是Immutable.js詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！