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的基本概念的更多相关文章

  1. Redux的核心概念,实现代码与应用示例

    Redux是一种JavaScript的状态管理容器,是一个独立的状态管理库,可配合其它框架使用,比如React.引入Redux主要为了使JavaScript中数据管理的方便,易追踪,避免在大型的Jav ...

  2. 通过Redux源码学习基础概念一:简单例子入门

    最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验. 首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react- ...

  3. Redux教程1:环境搭建,初写Redux

    如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...

  4. 详解 Node + Redux + MongoDB 实现 Todolist

    前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...

  5. React从入门到放弃之前奏(3):Redux简介

    安装 npm i -S redux react-redux redux-devtools 概念 在redux中分为3个对象:Action.Reducer.Store Action 对行为(如用户行为) ...

  6. redux 简介

    概述 Redux 本身是个极其简单的状态管理框架, 它的简单体现在概念少, 流程明确. 但是, 正是因为简单, 使用上没有强制的约束, 所以如果用不好, 反而会让状态管理更加混乱. 我觉得, 用好 R ...

  7. 25.redux回顾,redux中的action函数异步

    回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...

  8. 草珊瑚的redux使用方式

    前言 阮大师写入门教程能力一流. 首推它的Redux三篇入门文章. http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_bas ...

  9. Redux系列02:一个炒鸡简单的react+redux例子

    前言 在<Redux系列01:从一个简单例子了解action.store.reducer>里面,我们已经对redux的核心概念做了必要的讲解.接下来,同样是通过一个简单的例子,来讲解如何将 ...

随机推荐

  1. Hive初识(三)

    根据用户的需求创建视图.可以将任何结果集数据保存为一个视图.视图在Hive的用法和SQL视图用法相同.它是一个标准的RDBMS概念.我们可以在视图上执行所有DML操作. 创建一个试图 可以创建一个试图 ...

  2. 九、IIC驱动原理分析

    学习目标:学习IIC驱动原理: 一.IIC总线协议 IIC串行总线包括一条数据线(SDA)和一条时钟线(SCL),支持“一主多从”和“多主机”模式:每个从机设备都有唯一的地址来识别. 图 1 IIC ...

  3. 以源码安装的lamp环境为依托,源码安装zabbix监控系统

    1.源码安装lamp环境 1)安装httpd, 以源码httpd-2.4.33为基础,解压后,执行./configure --prefix=/usr/local/ --sysconfdir=/etc/ ...

  4. P2340 奶牛会展(状压dp)

    P2340 奶牛会展 题目背景 奶牛想证明它们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N 头奶牛进行 了面试,确定了每头奶牛的智商和情商. 题目描述 贝西有权选择让哪些奶牛参加展览.由 ...

  5. Vue-router使用

    Vue路由:--------------------------------------------------------1 .Vue-rouer入门2 .子路由3 .路由传参4 .多路由区域操作5 ...

  6. FreeRTOS软件定时器的使用

    先贴上一个创建的代码,先声明一个句柄 TimerHandle_t pump_wakeup_timer_handle = NULL; 创建定时器和启动定时器,第三个参数,pdFALSE是只定时一次,pd ...

  7. lua基础知识笔记

    一.lua中的数据类型 1.数值 a = 1 b = 1.2 2.字符串 c = "hello world" 3.布尔 d = true f = false 4.表(Table) ...

  8. springmvc基础篇—修改默认的配置文件名称及位置

    springmvc的默认配置文件是放在WEB-INF下的,叫action-servlet.xml.根据咱们编程的习惯,一般都将配置文件放到src的根目录下,那么如何将这个文件迁移过来呢?其实很简单,请 ...

  9. Git 相关工具及教程地址

    一.Git GUI 客户端 Git 客户端下载(Windows) TortoiseGit 客户端下载(Windows) Sourcetree 客户端下载(Windows.Mac) Git Extens ...

  10. JAVA的文件操作【转】

    11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程 ...