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. Scrapy结构

    http://scrapy-chs.readthedocs.io/zh_CN/1.0/intro/overview.html scrapy 使用Twisted 这个异步网络库来处理网络通信,使用pyt ...

  2. CentOS7安装配置Amanda

    参考: https://wenku.baidu.com/view/881e0c998e9951e79a892759.html yum  -y  install  amanda* http://blog ...

  3. centos中PATH环境变量查看和修改

    PAHT环境变量 :定义的是系统搜索命令的路径.<就是自己写的程序不打绝对路径就可以执行,必须放到 $PATH这个文件中>查看命令:echo $PATH 以添加mongodb server ...

  4. Problem D: 求(x-y+z)*2

    Description 编写一个程序,求解以下三个函数: f(x,y,z)=2*(x-y+z) f(x,y)  =2*(x-y) f(x)    =2*(x-1) 函数调用格式见append.cc. ...

  5. Java语法基础DayFive

    一.继承 1.格式:class 子类 extends 父类 2.好处:提高代码的复用性:让类与类之间产生了关系,是多态的前提. 3.弊端: (1)类的耦合性增强了,而开发的原则是高内聚,低耦合.内聚是 ...

  6. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

  7. <Java><!!!><面试题>

    装箱 & 拆箱 public class Test03 { public static void main(String[] args) { Integer f1 = 100, f2 = 10 ...

  8. 查看oracle数据库允许的最大连接数和当前连接数

    1.查看当前的数据库连接数  select count(*) from v$process ;    --当前的数据库连接数 2.数据库允许的最大连接数  select value from v$pa ...

  9. shell日常实战练习——通过监视用户登陆找到入侵者

    #!/usr/bin/bash #用户检测入侵工具 AUTHLOG=/var/log/secure if [[ -n $1 ]];then AUTHLOG=$1 echo "Using Lo ...

  10. C# Sublime text3 环境配置(一)

    下载地址:http://www.sublimetext.com/3 1.安装完之后,tools菜单下最下一个点一下,安装Package Control 插件2.Preferences菜单下,点Pack ...