1 使用combineReaducers 整合reducers

import { combineReducers } from 'redux-immutable';
import { reducer as headerReducer } from '../common/header/store';
import { reducer as homeReducer } from '../pages/home/store';
import { reducer as detailReducer } from '../pages/detail/store';
import { reducer as loginReducer } from '../pages/login/store'; const reducer = combineReducers({
header: headerReducer, //对应的state保存在 header下
home: homeReducer,
detail: detailReducer,
login: loginReducer
}); export default reducer;

2. 在store文件夹下建立index文件,把该文件夹下的内容,全部用index文件发出去:

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants'; export { reducer, actionCreators, constants };

3 对应的获取数据也要多一层:

const mapStateToprops = (state)=>{
return {
focused: state.header.focused
}
}

4. 使用immutable来改变state:先安装immutable(用在reducer中)

安装redux-immutable,在最外层的reducer中,将其中的state也变为immutable对象,

import { combineReducers } from 'redux-immutable';
import * as constants from './constants';
import { fromJS } from 'immutable'; //这里引入immutable const defaultState = fromJS({ //这里用fromJs将js对象改为immutable对象
focused: false,
mouseIn: false,
list: [],
page: 1,
totalPage: 1
}); export default (state = defaultState, action) => {
switch(action.type) {
case constants.SEARCH_FOCUS:
return state.set('focused', true); //使用set改变数据,immutable对象的set方法,会结合之前immutable对象的值和设置的值,返回一个全新的对象
case constants.SEARCH_BLUR:
return state.set('focused', false);
case constants.CHANGE_LIST:
return state.merge({ //改变多个数据
list: action.data,
totalPage: action.totalPage
});
case constants.MOUSE_ENTER:
return state.set('mouseIn', true);
case constants.MOUSE_LEAVE:
return state.set('mouseIn', false);
case constants.CHANGE_PAGE:
return state.set('page', action.page);
default:
return state;
}
}

获取单个immutable对象:(当没有引入redux-immutable的时候 state是从最外层的reducer而来,还是普通的js对象)

const mapStateToprops = (state)=>{
return {
focused: state.header.get('focused')
}
}

在组件中需要把immutable对象再改变回正常的js对象:(这种方法是引入看redux-immutable,然后在最外层的reducer中把state改成来 immutable对象,所以state可以使用getIn函数了,获取header的reducer下的focused)

const mapStateToProps = (state) => {
return {
focused: state.getIn(['header', 'focused']),
login: state.getIn(['login', 'login'])
}
}

5 使用axios异步获取数据,放在 actioncreater中:

import * as constants from './constants';
import { fromJS } from 'immutable';
import axios from 'axios'; const changeList = (data) => ({
type: constants.CHANGE_LIST,
data: fromJS(data),
totalPage: Math.ceil(data.length / 10)
}); export const getList = () => {
return (dispatch) => {
axios.get('/api/headerList.json').then((res) => {
const data = res.data;
dispatch(changeList(data.data)); //dispatch 使用了本文件中的函数,该函数不再对外
}).catch(() => {
console.log('error');
})
}
};

则前面组件调用方式为:

dispatch(actionCreators.getList());

因为有多个reducer 则对应的多个actionCreators,每个小store中 使用index 提供对外接口:
import { actionCreators } from './store';

combineReducers 对数据进行拆分管以及使用immutable.js的更多相关文章

  1. Oracle数据行拆分多行

    工作和学习中常常会遇到一行要分割成多行数据的情况,在此整理一下做下对比. 单行拆分 如果表数据只有一行,则可以直接在原表上直接使用connect by+正则的方法,比如: select regexp_ ...

  2. (Sql Server)数据的拆分和合并

    (Sql Server)数据的拆分和合并 背景: 今天遇到了数据合并和拆分的问题,尝试了几种写法.但大致可分为两类:一.原始写法.二.Sql Server 2005之后支持的写法.第一种写法复杂而且效 ...

  3. Redis集群数据没法拆分时的搭建策略

    在上一篇文章中,针对服务器单点.单例.单机存在的问题: 单点故障 容量有限 可支持的连接有限(性能不足) 提出了解决的办法:根据AKF原则搭建集群,大意是先X轴拆分,创建单机的镜像,组成主主.主备.主 ...

  4. Immutable.js – JavaScript 不可变数据集合

    不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估.Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 f ...

  5. m_Orchestrate learning system---三十五、php数据和js数据的解耦:php数据(php代码)不要放到js代码中

    m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...

  6. js中json数据简单处理(JSON.parse()和js中嵌套html)

    js中json数据简单处理(JSON.parse()和js中嵌套html) 一.总结 1.html中嵌套js:<script>js代码</script> 2.js中嵌套html ...

  7. React-使用combineReducers完成对数据对拆分管理

    数据都放在reducer.js下不利于对数据进行管理,可以把一个大的reducer.js拆分成多个小的reducer.js. 小的reducer.js const defaultState={ foc ...

  8. SqlServer 数据库/数据表 拆分(分布式)【转】

    通过某种特定的条件,将存放在同一个数据库中的数据分散存放到多个数据库上,实现分布存储,通过路由规则路由访问特定的数据库,这样一来每次访问面对的就不是单台服务器了,而是N台服务器,这样就可以降低单台机器 ...

  9. angular中ng-model,返回数据,拆分数据,展示,名称相同,重新赋值会有冲突

    本问题出在angular,1.X版本,我用的是1.5的版本: 问题原因: <input type="number" ng-mode="a" /> & ...

随机推荐

  1. MariaDB的线程及连接

    转自 linux公社 今天在这里介绍一下确认mariaDB(和MySQL一样)的链接数及线程数的方法.MariaDB和MySQL有什么不一样,现在还没有弄清楚. 这是减少数据库的负载,并能提高数据库运 ...

  2. RabbitMQ 设置消息的优先级

    在RabbitMQ中,可以设置消息的优先级,也就相当于在队列中置顶某条消息,让某个消息优先得到处理的功能. 既然是设置消息的优先级,那么就是针对生产者,也就是消息发布端. 设置消息的优先级一共有2个步 ...

  3. Java正则表达式的总结

    Java正则表达式,可以用于很多类型的文本处理, 如匹配,搜索,提取和分析结构化内容. 判断用户的输入是否符合实际需求. 匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.] ...

  4. 深入理解java虚拟机---对象的访问定位(十)

    引用其他人的文章: https://www.cnblogs.com/YYfish/p/6722258.html 那是怎么访问对象呢? java 程序是通过栈上的reference数据来操作堆上的具体对 ...

  5. bootstarp3

    1.布局 样式  col-**-1    最大为col-lg-12 表示最大 2.下拉框   .dropdown 下拉菜单(Dropdown)插件 https://github.com/danielf ...

  6. android 广播 接收短信

    ; i < messages.length; i++) { SmsMessage ms = SmsMessage.createFromPdu((byte[])pdus[i]); String f ...

  7. Linux 安装最新版本python3

    新安装了Linux系统(CentOS 6),发现已安装的python版本是2.6. 在网上搜索研究之后总结了一下怎么在保留python2的同时安装最新版的python3. 1. 查看 Python 的 ...

  8. VS2010,MFC动态按钮和窗体背景图片,以及是静态文字控件透明,并避免静态文字刷新出现的重叠问题

    1.动态按钮的四种动作 1)正常 2)按下 3)滑过 4)失效 在MFC中,4个动作对应着四种位图bmp, 首先,将代表四种状态的位图加载入资源中,将对应的按钮设置为BitmapButton 第二,在 ...

  9. LVS+OSPF+FULLNAT集群架构

    OSPF:OSPF(Open Shortest Path First开放式最短路径优先)是一个内部网关协议(Interior Gateway Protocol,简称IGP),用于在单一自治系统(aut ...

  10. Nodejs安装express提示不是内部或外部命令

    安装nodejs安装包后,通过npm安装express后,运行express提示" express"不是内部或外部命令. c:\express -t ejs web 原因是版本问题 ...