使用immutable.js让你的react程序更加高效

使用immutable.js让你的react程序更加高效

第一步

npm i redux-immutable immutable -S
//喜欢 yarn的同学
yarn add redux-immutable immutable 

第二步

//接下来需要在你的reducer里修改defaultState
import { Map,List,fromJS } from 'immutable';
// Map,List,fromJS是博主比较常用的，其它小伙伴想更深入的了解可以点击这里
const defaultState = Map({
	name:"Your name",
	x:{
		y:{
			z:"blue"
		}
	}
})

export default (state=defaultState,action)=>{
	switch(action){
		default:
			return state
	}
}

接下来修改你的reducer的导出文件

import { combineReducers } from 'redux-immutable'
import testReducer from './testReducer'

export default combinReducers({ testReducer })

接下来页面当中应该可以取得到了

import React,{ PureComponent } from "react"
import { connect } from "react-redux"

const mapStateToProps = (state)=>{
	return {
		name: state.getIn(['testReducer','name']),
		z:state.getIn(['testReducer',"x","y","z"])
	}
}

@connect(mapStateToProps)
class TestPage extends PureComponent{
	render(){
		return (
			<div>{ this.props.name }-----{tihs.props.z}</div>
		)
	} 
}

这时候你的immutable数据已经正常显示，接下来我们尝试修改下

import actionTypes from './actionTypes' 
export default (state=defaultState,action)=>{
	switch(action){
		case actionTypes.CHANG_ENAME_ACTION:
			//使用updateIn 方法示例
			return state.updateIn(["name"],item=>action.payload.value)
		case actionTypes.CHANG_X_Y_Z_ACTION:
			//使用 setIn 方法示例
			return state.setIn(["x","y","z"],action.payload.value)
		default:
			return state
	}
}

接下来简单介绍一下immutable的几个常用数据类型

/*
	Map    object类型
	List   一般
	fromJS
*/
let state = Map({})  //一般Object的类型使用Map
let listState = List([1,2,3,4]) //array类型可以使用List
let fzState = fromJS({name:"青山",list:[{name:"",children:[]}]}) 
//复杂类型的数据结构可以使用 fromJS 注：一般不建议设计这么复杂的数据结构，尽量扁平化

//set  get
let newState = fzState.set("name","山河")// 会返回一个新的对象，并不会修改 state
console.log(newState.get("name"),state.get("name")) // 山河,青山
//比较两个数据是否一样 的两种方法
newState.equals(state) //false 
is(newState,state)//false

//设置 setIn  getIn 注意第一个入参是 数组
let newState = fzState.setIn(["name"],"山河")// 
console.log(newState.getIn(["name"])) // 山河,青山

//update  ==> 注意与set的区别 是第二个参数为 function
let newState = fzState.update("name",item=>item)// 
let newState = fzState.updateIn(["x","y","z"],item=>item+"  " + "_changed")// 

let js = state.toJS()  //这样就可以把 state转化为js对象了

欢迎指出问题，大家共同学习，谢谢。想要深入学习immutable可以点击这里