react之路：使用immutable管理store中的数据

github仓库地址：https://github.com/wanghao12345/react-book

简介

immutable可以将store中的数据封装成一个immutable对象，这个对象拥有get，set等方法，这样就可以通过这些方法对store中的数据进行管理

使用

1.安装immutable依赖

npm install immutable --save 或者 yarn add immutable

2.store中引入

import { fromJS } from 'immutable'

3.使用get方法

在mapStateToProps中获取state数据时：

 1 /**
 2  * 将仓库的state映射到props(获取state)
 3  * @param state
 4  */
 5 const mapStateToProps = (state) => {
 6     return {
 7         // 没有使用immutable
 8         // focused: state.header.focused
 9         // 使用了immutable
10         focused: state.header.get('focused')
11     }
12 }

4.使用set方法

 1 import * as constants from './constants'
 2
 3 import { fromJS } from 'immutable'
 4
 5 // fromJS将一个js对象转化成immutable对象
 6 const defaultState = fromJS({
 7     focused: false
 8 })
 9
10 export default (state = defaultState, action) => {
11
12     if (action.type === constants.SEARCH_FOCUS) {
13         // 没有使用immutable
14         // return {15         //     focused: true
16         // }
17
18         // 使用了immutable
19         // immutable对象的set方法，会结合之前的immutable对象的值
20         // 和设置的值，返回一个全新的对象
21         return state.set('focused', true)
22     }
23
24     if (action.type === constants.SEARCH_BLUR) {
25         // 没有使用immutable
26         // return {27         //     focused: false
28         // }
29
30         // 使用了immutable
31         return state.set('focused', false)
32     }
33
34     return state
35 }

转载于:https://www.cnblogs.com/wanghao123/p/11162431.html

react之路：使用immutable管理store中的数据相关推荐

React进阶(3)-上手实践Redux-如何改变store中的数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊 (祝今日天下有情人终成兄妹) 撰文 | 川川 VX-ID ...
数据仓库Hive编程——HiveQL的数据操作（一）：向管理表中装载数据
既然Hive没有行级别的数据插入.数据更新和删除操作,那么往表中装载数据的唯一途径就是使用一种"大量"的数据装载操作.或者通过其他方式仅仅将文件写入到正确的目录下. 在<Hi ...
react发送Ajax中文问号,如何从Javascript/React发送AJAX请求并在pythonrestapi中接收数据...
我在react中编写了前端代码.我有一个简单的for,用户可以填写他们的姓名.职务.部门和其他类似的基本字符串字段.当用户点击提交时,我让javascript创建一个用python+flask编写的对 ...
SAP License：如何更好的管理ERP中的供应商？
现代企业成功的采购管理,越来越离不开ERP的成功实施,ERP已经成为现代化采购管理的重要工具. 一.采购管理与ERP集成的一体化思想 ERP系统面向企业的整个业务流程,其核心思想是将企业的业务流程看作 ...
管理信息系统相关计算机技术,分析管理信息系统中计算机通信技术要点
李明摘要:基于我国社会经济的快速发展,计算机通讯技术已经引起人们的重视.将计算机通信技术应用到管理信息系统中,能够有效保证系统的稳定运行,提高资源的利用率.因此,本文主要分析管理信息系统中计算机通信 ...
第二篇：智能电网(Smart Grid)中的数据工程与大数据案例分析
前言上篇文章中讲到,在智能电网的控制与管理侧中,数据的分析和挖掘.可视化等工作属于核心环节.除此之外,二次侧中需要对数据进行采集,数据共享平台的搭建显然也涉及到数据的管理.那么在智能电网领域中,数据 ...
vuex页面数据丢失_解决 vuex 中的数据在页面刷新之后就丢失的问题
在vue的项目中我们一般都会使用到vuex,在vuex中我们会保存一个需要全局使用的变量或者状态,这样方便我们使用.但是vuex的store中的数据有一个特性,那就是在页面刷新时,页面会重新加载vue ...
mysql数据库中对数据的基本操作
文章目录一.MySQL常用的数据类型二.查看数据库结构 1.查看当前服务器中的数据库 2.查看数据库中包含的表 3.查看表的结构(字段) 三.SQL语句四.创建及删除数据库和表 1.创建新的数据 ...
Hive学习笔记（五）向表中装载数据
1.向管理表中装载数据再次强调,Hive没有行级别的数据插入.数据更新和删除操作. LOAD DATA LOCAL INPATH '${env:HOME}/california-employees' ...