React-使用imutable.js来管理store中的数据
reducer.js中store的数据是不能改变的,用原始的方法要手动的保证store不被修改,存在风险。imutable.js可以生成一个不可改变的对象,可以避免掉自己不小心修改掉store的情况。
1.安装
npm install immutable --save
2.reducer.js中导入immutable,fromJS方法可以把一个普通对象变成不可变对象。修改数据时用set方法。
import * as actionTypes from './actionTypes'; import{ fromJS } from 'immutable' /*fromJS方法可以把一个普通对象变成不可变对象*/ const defaultState=fromJS({ focused:false }) export default(state=defaultState,action)=>{ if(action.type==actionTypes.SEARCH_FOCUS){ //immutable对象的set方法,会结合之前的immutable对象的值和设置的值,返回一个全新的对象,不是修改对象的值 return state.set('focused',true) } if(action.type==actionTypes.SEARCH_BLUR){ return state.set('focused',false) } return state; }
3.组件中获取数据时,用get方法。
const mapStateToProps = (state) => { //focused是immutable对象,不能用state.header.focused的形式获取,要用get() return { focused:state.header.get('focused') } }