React-使用redux-immutable统一数据格式
在header的reducer.js里把header变成immutable对象之后,在组件里获取focused属性就得这样获取:
focused:state.header.get('focused')
state是一个js对象,state.header是一个immutable对象,所以调用focused这个属性点时候先用.再用.get(),数据获取行为是不统一的。我们需要把state也变成immutable对象而不是js对象。
state是在跟目录的总的reducer.js下创建的,我们需要依赖一个redux-immutable库。
1.安装
npm install redux-immutable --save
2.跟目录下总的reducer.js里:combineReducers不再用rudux里的,而是redux-immutable里的,这样combineReducers里的对象就是一个immutable对象。
//combineReducers不再用rudux里的,而是redux-immutable里的,这样combineReducers里的对象就是一个immutable对象
//import {combineReducers} from 'redux'
import {combineReducers} from 'redux-immutable'
import {reducer as headerReducer} from '../common/header/store'
const reducer=combineReducers({
header:headerReducer
});
export default reducer;
3.获取数据的时候用get(),或者getIn()
const mapStateToProps = (state) => {
return {
focused:state.getIn(['header','focused'])
//focused:state.get('header').get('focused')
}
}
React-使用redux-immutable统一数据格式的更多相关文章
- react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)
公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...
- immutable.js 在React、Redux中的实践以及常用API简介
immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark : https://yq.aliyu ...
- React之redux学习日志(redux/react-redux/redux-saga)
redux官方中文文档:https://www.redux.org.cn/docs/introduction/CoreConcepts.html react-redux Dome:https://co ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。
前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
- 【前端,干货】react and redux教程学习实践(二)。
前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...
- [React] 15 - Redux: practice IM
本篇属于私人笔记. client 引导部分 一.assets: 音频,图片,字体 ├── assets │ ├── audios │ ├── fonts │ └── images 二.main&quo ...
- React、Redux 和 Bootstrap
使用 React.Redux 和 Bootstrap 实现 Alert 今天,我们来学习使用 React.Redux 和 Bootstrap 实现Alert. 例子 这个例子实现了弹出不同类型信息的功 ...
- 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)
背景 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
随机推荐
- 从零开始学习html(二)认识标签(第一部分)——上
一.语义化,让你的网页更好的被搜索引擎理 学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化. 那么什么叫 ...
- python自动化开发-7
socket编程 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对 ...
- WRT 下 C++ wstring, string, String^ 互转
由于项目原因,需要引入C++. wstring 与 string 的互转研究了一段时间,坑主要在于使用下面这种方式进行转换,中文会乱码 wstring ws = L"这是一段测试文字&quo ...
- java注释讲解
注释简单的来说就是一种说明,不能被当成执行语句执行.做为一名程序员,但我们在写代码时是顺着思路写下去的.写代码好比就是在做题.当你在做的时候你脑海时的思路很清晰,会想到用一些特殊的方法来解决当前的问题 ...
- [NOIP2018]保卫王国
嘟嘟嘟 由于一些知道的人所知道的,不知道的人所不知道的原因,我来发NOIP2018day2T3的题解了. (好像我只是个搬运工--) 这题真可以叫做NOIplus了,跟其他几道比较水的题果然不一样,无 ...
- 分布式服务化系统一致性(分布式事务、ACID、BASE、CAP)原理与解决方案
https://blog.csdn.net/rickiyeat/article/details/70224722
- Arduino 433 自定义接受
/* Simple example for receiving https://github.com/sui77/rc-switch/ */ #include <RCSwitch.h> # ...
- Ubuntu中创建Python虚拟环境
创建虚拟环境对于Python开发来说是非常重要的,那么该如何创建虚拟环境呢? 1.安装virtulenv工具和管理包 sudo apt-get install python3-virtulenv 或 ...
- oracle 迁移
一.创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建. create directory exp_shengchan as '/home/oracle/exp_shen ...
- checkbox选中并通过ajax传数组到后台接收
这次讲的是通过复选框,选中,点击提交,并将值chuan到后台controller.这个应用是比较广的,什么批量修改,批量添加,授权管理等等,都用到这个.其实这个还是挺简单的,并没有想象中的那么难,但我 ...