在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. mysql 的一些事

    给mysql的root用户设置密码 1.刚安装好的mysql是没有设置密码的 2.设置密码 ****************************************************** ...

  2. Tensorflow实现稀疏自动编码(SAE)

    1.概述 人在获取图像时,并不是像计算机逐个像素去读,一般是扫一眼物体,大致能得到需要的信息,如形状,颜色,特征.怎么让机器也有这项能力呢,稀疏编码来了. 定义: 稀疏自编码器(Sparse Auto ...

  3. 搭建iSCSI文件服务器故障转移群集

    故障转移群集(Failover Cluster)可以提供一个高可用性应用程序或服务的网络环境,本章将接受如何搭建iSCSI SAN文件服务器故障转移群集. 故障转移群集概述 我们可以将多台服务器组成一 ...

  4. Mac上用spotlight搜索输入几个字母后闪退

    最近使用电脑时遇到的问题: 使用spotlight进行搜索时,只要输入字母超过一定个数(在我的Mac上是3个),spotlight就闪退了. 谷歌搜索得到大部分解决方案是在系统自带词典的偏好设置里取消 ...

  5. CRM lookup筛选

    function Loadcouse() { var type; var id; retrieveRecord(Xrm.Page.getAttribute("ownerid").g ...

  6. Oracle 单引号 双引号 转义符 分隔符

    概述 单引号用来标记字符串 双引号用来标记识别对象名 以下使用会比较绕: 字符串中出现单引号.双引号: 表或字段等对象的别名(alias)中出单引号.双引号: 单引号.双引号与空格一起使用: 双引号 ...

  7. 浅谈tidb事务与MySQL事务之间的区别

    MySQL是我们日常生活中常见的数据库,他的innodb存储引擎尤为常见,在事务方面使用的是扁平事务,即要么都执行,要么都回滚.而tidb数据库则使用的是分布式事务.两者都能保证数据的高一致性,但是在 ...

  8. 4.6Python多版本存在问题

    返回总目录 目录: 1.展示效果: 2.操作流程: (一)展示效果: 1.多个版本python运行的情况: 2.多个版本pip运行的情况: (二)操作流程: 1.很关键的一条语句: pythonx.x ...

  9. Windows系统安装nginx及配置

    1.下载nginx http://nginx.org/en/download.html         下载稳定版本,以nginx/Windows-1.12.2为例,直接下载 nginx-1.12.2 ...

  10. SAP SQVI 快速浏览器

    SQVI可向SQL一样连接多个表浏览数据. 1.输入T-CODE:SQVI. 2.新建一个新查询case 输入CASE 名.点击新建,在弹出的窗口中输入标题,在数据源中可选择单个表查询,或者选择表连接 ...