redux的基本概念
1. State 应用的数据,即状态
2. Action 一个纯对象,携带这个操作的类型和数据信息,主要是用来进行传递信息,如下所示:
const action = {
type: 'ADD_TODO',
payload: {}
}
3. Action Creater 一个函数,根据指定参数,来生成一个Action,目的是减少代码量
4. Reducer 一个纯函数,用来修改应用的状态,接收当前State和Action,返回一个新的State,如下所示:
const reducer = function(state,action){
//...
return new_state;
}
Reducer是一个纯函数,有如下特征:
1. 不得改写参数
2. 不得调用系统的I/O的API
3. 不得调用Date.now()或者Math.random()等不纯的方法,因为每次得到的结果会不一样
Reducer不能改变State,必须返回一个新的对象,具体可以使用{...obj}运算符或者Object.assign()来操作
5. combineReducers 一个函数,将多个小的Reducer合并成一个大的Reducer
单个Reducer修改state会造成解析Action的Switch语句过长,代码量大,难以维护,需要将Reducer拆分为多个函数,
每个函数只修改一部分State,然后将修改的结果合并成一个State,combineReducer就做了这个事情
6. Store 数据存储中心
Store有三大方法:
Store.getState() 获取Store当前的状态
Store.dispatch() 分派一个Action,用来修改Store的状态,从View中发出Action的唯一方法
Store.subscribe() 订阅一个监听器,当Store的状态发生改变的时候,执行函数
7. Middlewares 中间件
中间件实际上就是一个拦截器,本质是一个函数,拦截所有的Action,并执行特定的操作
如日志中间件,拦截Action,并且打印每个Action
redux-thunk中间件,区分Action是否是一个函数,如果是就执行该函数,否则正常派发Action到Reducer
中间件执行过程如下图所示:

redux的基本概念的更多相关文章
- Redux的核心概念,实现代码与应用示例
Redux是一种JavaScript的状态管理容器,是一个独立的状态管理库,可配合其它框架使用,比如React.引入Redux主要为了使JavaScript中数据管理的方便,易追踪,避免在大型的Jav ...
- 通过Redux源码学习基础概念一:简单例子入门
最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验. 首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react- ...
- Redux教程1:环境搭建,初写Redux
如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...
- 详解 Node + Redux + MongoDB 实现 Todolist
前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...
- React从入门到放弃之前奏(3):Redux简介
安装 npm i -S redux react-redux redux-devtools 概念 在redux中分为3个对象:Action.Reducer.Store Action 对行为(如用户行为) ...
- redux 简介
概述 Redux 本身是个极其简单的状态管理框架, 它的简单体现在概念少, 流程明确. 但是, 正是因为简单, 使用上没有强制的约束, 所以如果用不好, 反而会让状态管理更加混乱. 我觉得, 用好 R ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- 草珊瑚的redux使用方式
前言 阮大师写入门教程能力一流. 首推它的Redux三篇入门文章. http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_bas ...
- Redux系列02:一个炒鸡简单的react+redux例子
前言 在<Redux系列01:从一个简单例子了解action.store.reducer>里面,我们已经对redux的核心概念做了必要的讲解.接下来,同样是通过一个简单的例子,来讲解如何将 ...
随机推荐
- Hive初识(三)
根据用户的需求创建视图.可以将任何结果集数据保存为一个视图.视图在Hive的用法和SQL视图用法相同.它是一个标准的RDBMS概念.我们可以在视图上执行所有DML操作. 创建一个试图 可以创建一个试图 ...
- 九、IIC驱动原理分析
学习目标:学习IIC驱动原理: 一.IIC总线协议 IIC串行总线包括一条数据线(SDA)和一条时钟线(SCL),支持“一主多从”和“多主机”模式:每个从机设备都有唯一的地址来识别. 图 1 IIC ...
- 以源码安装的lamp环境为依托,源码安装zabbix监控系统
1.源码安装lamp环境 1)安装httpd, 以源码httpd-2.4.33为基础,解压后,执行./configure --prefix=/usr/local/ --sysconfdir=/etc/ ...
- P2340 奶牛会展(状压dp)
P2340 奶牛会展 题目背景 奶牛想证明它们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N 头奶牛进行 了面试,确定了每头奶牛的智商和情商. 题目描述 贝西有权选择让哪些奶牛参加展览.由 ...
- Vue-router使用
Vue路由:--------------------------------------------------------1 .Vue-rouer入门2 .子路由3 .路由传参4 .多路由区域操作5 ...
- FreeRTOS软件定时器的使用
先贴上一个创建的代码,先声明一个句柄 TimerHandle_t pump_wakeup_timer_handle = NULL; 创建定时器和启动定时器,第三个参数,pdFALSE是只定时一次,pd ...
- lua基础知识笔记
一.lua中的数据类型 1.数值 a = 1 b = 1.2 2.字符串 c = "hello world" 3.布尔 d = true f = false 4.表(Table) ...
- springmvc基础篇—修改默认的配置文件名称及位置
springmvc的默认配置文件是放在WEB-INF下的,叫action-servlet.xml.根据咱们编程的习惯,一般都将配置文件放到src的根目录下,那么如何将这个文件迁移过来呢?其实很简单,请 ...
- Git 相关工具及教程地址
一.Git GUI 客户端 Git 客户端下载(Windows) TortoiseGit 客户端下载(Windows) Sourcetree 客户端下载(Windows.Mac) Git Extens ...
- JAVA的文件操作【转】
11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程 ...