在react/redux中使用Immutable

//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,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‘,function(x){return x+4})   //data6中的 d = 7
var data7 = immutableData.delete(‘a‘)   //data7中的 a 不存在
var data8 = immutableData.deleteIn([‘c‘,‘d‘])   //data8中的 d 不存在

// reducer
...
return [
   ...oldArr.slice(0,3),newValue,...oldArr.slice(4)   
];

// reducer
...
return oldArr.set(4,newValue);

a、fromJS和toJS会深度转换数据，随之带来的开销较大，尽可能避免使用，单层数据转换使用Map()和List()

b、js是弱类型，但Map类型的key必须是string！（也就是我们取值是要用get(‘1‘)而不是get(1)）

c、所有针对immutable变量的增删改必须左边有赋值，因为所有操作都不会改变原来的值，只是生成一个新的变量

d、获取深层深套对象的值时不需要做每一层级的判空(JS中如果不判空会报错，immutable中只会给undefined)

e、immutable对象直接可以转JSON.stringify(),不需要显式手动调用toJS()转原生

f、判断对象是否是空可以直接用size

g、调试过程中要看一个immutable变量中真实的值，可以chrome中加断点，在console中使用.toJS()方法来查看

//在render函数调用前判断：如果前后state中Number不变，通过return false阻止render调用
  shouldComponentUpdate(nextProps,nextState){
      if(nextState.Number == this.state.Number){
        return false
      }
  }

import { is } from ‘immutable‘;

shouldComponentUpdate: (nextProps = {},nextState = {}) => {
  const thisProps = this.props || {},thisState = this.state || {};

//判断长度是否改变，长度改变的话，数据一定改一定需要重新渲染
  if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
    return true;
  }

//当原数据和next的数据长度一致时需要遍历循环比较
  for (const key in nextProps) {
    if (!is(thisProps[key],nextProps[key])) {
      return true;
    }
  }

  for (const key in nextState) {
    if (thisState[key] !== nextState[key] || !is(thisState[key],nextState[key])) {
      return true;
    }
  }
  return false;
}

import { createStore,applyMiddleware } from ‘redux‘

//引入immutable
import Immutable from ‘immutable‘

import thunk from ‘redux-thunk‘
import reducers from ‘./reducers‘

//变为map函数
const initialState = Immutable.Map();

//注入
const store = createStore(reducers,initialState,applyMiddleware(thunk))

export default store

//以前引入的是redux的combineReducers方法
// import { combineReducers } from ‘redux‘

//现在改为引入redux-immutable中
import { combineReducers } from ‘redux-immutable‘

import { reducer as cookbook } from ‘pages/cookbook‘
import { reducer as menu } from ‘pages/menu‘

export default combineReducers({
  cookbook,menu
})

import { CHANGE_FROM } from ‘./actionTypes‘

//引入fromJS
import { fromJS } from ‘immutable‘

//把获取到的数据变成immutable的Map()形式
const defaultState = fromJS({
  from: ‘category‘
})


//对state进行改变的时候采用immutable的方法
export default (state=defaultState,action) => {
  if (action.type === CHANGE_FROM) {
    return state.set(‘from‘,action.from)
  }

  return state
}

//通过toJS()方法转换为原生再进行map遍历    
let data = this.props.categories && this.props.categories.get(‘热门‘).toJS().slice(0,11).map((value,index) => {
      return {
        icon: value.img,text: value.title
      }
    })