1. 程式人生 > >immutable.js

immutable.js

//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 不存在
  1. fromJS和toJS會深度轉換資料,隨之帶來的開銷較大,儘可能避免使用,單層資料轉換使用Map()和List()
  2. js是弱型別,但Map型別的key必須是string!
  3. 所有針對immutable變數的增刪改必須左邊有賦值,因為所有操作都不會改變原來的值,只是生成一個新的變數
  4. 引入immutablejs後,不應該再出現物件陣列拷貝的程式碼
  5. 獲取深層深套物件的值時不需要做每一層級的判空
  6. immutable物件直接可以轉JSON.stringify(),不需要顯式手動呼叫toJS()轉原生
  7. 判斷物件是否是空可以直接用size
  8. 除錯過程中要看一個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
    }));
},