zoukankan      html  css  js  c++  java
  • 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')    
          }    
    }

     

  • 相关阅读:
    浏览器内核
    gulp菜鸟级零基础详细教程
    Mysql自连接的一些用法
    ListView和Adapter数据适配器的简单介绍
    Android轮播图
    css-flex布局知识梳理
    JavaScript 复杂判断的更优雅写法
    团队合作前端书写习惯总结
    常见的HTTP报头(头参数)
    常见的HTTP状态码
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9474506.html
Copyright © 2011-2022 走看看