immutable.js
阿新 • • 發佈:2019-01-06
//Map() 原生object轉Map物件 (只會轉換第一層,注意和fromJS區別)
immutable.Map({name:'danny', age:18})
//List() 原生array轉List物件 (只會轉換第一層,注意和fromJS區別)
immutable.List([1,2,3,4,5])
//fromJS() 原生js轉immutable物件 (深度轉換,會將內部巢狀的物件和陣列全部轉成immutable)
immutable.fromJS([1,2,3,4,5]) //將原生array --> List immutable.fromJS({name:'danny', age:18}) //將原生object --> Map
//toJS() immutable物件轉原生js (深度轉換,會將內部巢狀的Map和List全部轉換成原生js)
immutableData.toJS();
//檢視List或者map大小
immutableData.size 或者 immutableData.count()
// is() 判斷兩個immutable物件是否相等
immutable.is(imA, imB);
//merge() 物件合併
var imA = immutable.fromJS({a:1,b:2}); var imA = immutable.fromJS({c:3}); var imC = imA.merge(imB); console.log(imC.toJS()) //{a:1,b:2,c:3}
//增刪改查(所有操作都會返回新的值,不會修改原來值)
var immutableData = immutable.fromJS({
a:1,
b:2,
c:{
d:3
}
});
var data1 = immutableData.get('a') // data1 = 1
var data2 = immutableData.getIn(['c', 'd']) // data2 = 3
getIn用於深層結構訪問
var data3 = immutableData.set('a' , 2); // data3中的 a = 2 var data4 = immutableData.setIn(['c', 'd'], 4); //data4中的 d = 4 var data5 = immutableData.update('a',function(x){return x+4})
//data5中的 a = 5
var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4})
//data6中的 d = 7
var data7 = immutableData.delete('a') //data7中的 a 不存在
var data8 = immutableData.deleteIn(['c', 'd']) //data8中的 d 不存在
- fromJS和toJS會深度轉換資料,隨之帶來的開銷較大,儘可能避免使用,單層資料轉換使用Map()和List()
- js是弱型別,但Map型別的key必須是string!
- 所有針對immutable變數的增刪改必須左邊有賦值,因為所有操作都不會改變原來的值,只是生成一個新的變數
- 引入immutablejs後,不應該再出現物件陣列拷貝的程式碼
- 獲取深層深套物件的值時不需要做每一層級的判空
- immutable物件直接可以轉JSON.stringify(),不需要顯式手動呼叫toJS()轉原生
- 判斷物件是否是空可以直接用size
- 除錯過程中要看一個immutable變數中真實的值,可以chrome中加斷點,在console中使用.toJS()方法來檢視
專案中的應用
<!--刪除一個server同時更新store進行頁面更新-->
[DELETE_SERVER]: (app, action) => {
let servers = app.get('servers'); //獲取store中的servers
let ser = action.payload; //後臺返回的結果
let index = servers.findIndex(i => {
return i.get('_id') === ser._id; //判斷是否存在
});
if (index === -1) {
return app;
} else {
return app.set('servers', servers.delete(index)); //重新設定刪除index後的servers
}
}
<!--更新一個package同時更新store進行頁面更新-->
[UPDATE_PACKAGE]: (app, action) => {
let packages = app.get('packages');
let pac = fromJS(action.payload);
let index = packages.findIndex(i => {
return i.get('_id') === pac.get('_id')
})
if (index === -1) return app;
app = app.set('package', pac);
return app.set('packages', packages.update(index, () => {
return pac
}));
},