在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之Query Cache

    1,QueryCache的实现原理: 1.目前只有select语句会被cache,其他类似show,use的语句则不会被cache. 2.两个SQL语句,只要相差哪怕是一个字符(例如大小写不一样:多一 ...

  2. 解决git did not exit cleanly (exit code 128)

    最近在用git提交代码到部门服务器上的时候,总是有 提示 git did not exit cleanly (exit code 128).网上有2种解决方式: 1.替换路径 1.鼠标右键 -> ...

  3. 在Salesforce中使用静态资源

    静态资源 静态资源是Salesforce中默认的一种数据类型,用户可以上传各种文件,比如zip文件.jpg文件.css文件.图像文件等. 在Visualforce页面.Lightning框架的开发过程 ...

  4. Jenkins 开启用户注册机制及用户权限设置

    Jenkins 开启用户注册机制及用户权限设置   by:授客 QQ:1033553122 步骤 1.  系统管理-Configure Global Security 2.  设置

  5. loadrunner 运行脚本-命令行运行脚本

    Loadrunner 运行脚本-命令行运行脚本   by:授客 QQ:1033553122 脚本所在目录 Run-time Settings->Additional Attributes设置   ...

  6. 安卓开发_WebView如何在Fragment中使用

    之前学习了如何在activity中使用WebView控件来显示网页. 在我的实际开发中,有需要在Fragment中用到WebView控件的,那么就百度学习了一下 其实很简单,但是当然不是和在Activ ...

  7. wap2app(三)-- 添加引导页

    1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plus ...

  8. SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法(2)

    书接上文. 上文中描述了如何在 SpringCloud+Feign环境下上传文件与form-data同时存在的解决办法,实践证明基本可行,但却会引入其他问题. 主要导致的后果是: 1. 无法与普通Fe ...

  9. Sql Server 判断字符串是否可以转数字

    主要是在sql server的内置系统函数ISNUMERIC的基础上,将例外的“+”.“-”.“$”等也进行判断. CREATE FUNCTION [dbo].[fn_IsNumberic]( @st ...

  10. linux下安装mysql简单步骤

    linux下使用yum安装mysql 1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没有安装包: yum list ...