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全家桶实现一个完整应 ...
随机推荐
- mysql之Query Cache
1,QueryCache的实现原理: 1.目前只有select语句会被cache,其他类似show,use的语句则不会被cache. 2.两个SQL语句,只要相差哪怕是一个字符(例如大小写不一样:多一 ...
- 解决git did not exit cleanly (exit code 128)
最近在用git提交代码到部门服务器上的时候,总是有 提示 git did not exit cleanly (exit code 128).网上有2种解决方式: 1.替换路径 1.鼠标右键 -> ...
- 在Salesforce中使用静态资源
静态资源 静态资源是Salesforce中默认的一种数据类型,用户可以上传各种文件,比如zip文件.jpg文件.css文件.图像文件等. 在Visualforce页面.Lightning框架的开发过程 ...
- Jenkins 开启用户注册机制及用户权限设置
Jenkins 开启用户注册机制及用户权限设置 by:授客 QQ:1033553122 步骤 1. 系统管理-Configure Global Security 2. 设置
- loadrunner 运行脚本-命令行运行脚本
Loadrunner 运行脚本-命令行运行脚本 by:授客 QQ:1033553122 脚本所在目录 Run-time Settings->Additional Attributes设置 ...
- 安卓开发_WebView如何在Fragment中使用
之前学习了如何在activity中使用WebView控件来显示网页. 在我的实际开发中,有需要在Fragment中用到WebView控件的,那么就百度学习了一下 其实很简单,但是当然不是和在Activ ...
- wap2app(三)-- 添加引导页
1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plus ...
- SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法(2)
书接上文. 上文中描述了如何在 SpringCloud+Feign环境下上传文件与form-data同时存在的解决办法,实践证明基本可行,但却会引入其他问题. 主要导致的后果是: 1. 无法与普通Fe ...
- Sql Server 判断字符串是否可以转数字
主要是在sql server的内置系统函数ISNUMERIC的基础上,将例外的“+”.“-”.“$”等也进行判断. CREATE FUNCTION [dbo].[fn_IsNumberic]( @st ...
- linux下安装mysql简单步骤
linux下使用yum安装mysql 1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没有安装包: yum list ...