在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统一数据格式的更多相关文章

  1. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  2. immutable.js 在React、Redux中的实践以及常用API简介

    immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyu ...

  3. React之redux学习日志(redux/react-redux/redux-saga)

    redux官方中文文档:https://www.redux.org.cn/docs/introduction/CoreConcepts.html react-redux Dome:https://co ...

  4. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  5. 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。

    前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...

  6. 【前端,干货】react and redux教程学习实践(二)。

    前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...

  7. [React] 15 - Redux: practice IM

    本篇属于私人笔记. client 引导部分 一.assets: 音频,图片,字体 ├── assets │ ├── audios │ ├── fonts │ └── images 二.main&quo ...

  8. React、Redux 和 Bootstrap

    使用 React.Redux 和 Bootstrap 实现 Alert 今天,我们来学习使用 React.Redux 和 Bootstrap 实现Alert. 例子 这个例子实现了弹出不同类型信息的功 ...

  9. 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)

    背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...

  10. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

随机推荐

  1. VUE路由转场特效,WebAPP的前进与后退

    一.效果图 二.思路 1. 定义两个 CSS 过度动画,前进与后退: slide-right-enter   和   slide-left-enter 2. 给路由配置meta信息,设置各个路由的级别 ...

  2. spring 开发 Tars

    和不使用 Spring 的 tars HelloWord 项目相比,客户端完全一样,服务端两个地方不一样 创建不使用 Spring 的 tars HelloWord 步骤: https://www.c ...

  3. 洗礼灵魂,修炼python(46)--巩固篇—如虎添翼的property

    @property 在前面装饰器一章中,提过一句话,装饰器也可以用于类中,确实可以的,并且python的类也内置了一部分装饰器.并且在前两章的hasattr等四个内置方法中,也说过其用法很类似装饰器, ...

  4. 修改Devexpress DateEdit控件默认的日期格式和日历风格

    最近项目中很多地方使用到DevExpress的DateEdit控件,而且设置都是一致(日期格式.选择日期的日历的风格等).每一次都需要设置太痛苦,因此需要寻找一种高效的解决方式. 一. 设置好一个作为 ...

  5. PLS-00306: 调用 'SYNCRN' 时参数个数或类型错误

    System.Data.OracleClient.OracleException (0x80131938): ORA-00604: 递归 SQL 级别 1 出现错误 ORA-06550: 第 1 行, ...

  6. Hive-1.2.1_04_DML操作

    Hive官方文档:Home-UserDocumentation Hive DML官方文档:LanguageManual DML 参考文章:Hive 用户指南 1. Loading files into ...

  7. js从数组中删除指定值(不是指定位置)的元素

    RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...

  8. python第五十三课——time模块

    1.time.datatime.calendar模块的引入讲解(重视) Unix时间戳(timestamp):返回的是数值类型数据(float值), 概念:记录了从1970年00点00分00秒至今的秒 ...

  9. python re模块记录

    import re'''re模块 compile    match search findall    group groups 正则表达式常用格式: 字符:\d \w \t  . (\d:数字;\w ...

  10. IOS HTML5页面中数字自动变蓝并识别为手机号

    开发HTML5的项目时发现页面元素为一串数字时,IOS手机会默认显示成蓝色字体,并且添加下划线,点击数字时会提示是否识别为手机号. 解决此问题的方法很简单,在head标签中添加下面的meta标记即可解 ...