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. python-time模块、sys模块、os模块以及大量实例

    模块 通俗的说模块就把一个已经写好的带有可使用的函数的文件,通过文件名进行导入,然后调用里面的函数等来完成所需功能,模块封装了你需要实现功能的代码,使用者只需调用即可,简化代码量,缩短编程时间. ti ...

  2. go web处理上传

    要使表单能够上传文件,第一步就是添加form的enctype属性,enctype属性有如下三种情况: application/x-www-form-urlencoded 表示在发送前编码所有字符(默认 ...

  3. 让CPU使用率正弦变化

    网络上流传一个面试题,说如何编程让CPU的使用率按照正弦方式变化 代码如下(运行环境Linux): #include <stdio.h> #include <stdlib.h> ...

  4. 38-JWT 设计解析及定制

    可去官网下载Security项目查看源码 只需修改 AddJwtBearer中的行为即可 public void ConfigureServices(IServiceCollection servic ...

  5. ansible结合SHELL搭建自己的CD持续交付系统

    一. 设计出发点 因公司业务面临频繁的迭代上线,一日数次.仅仅依靠手工效率过低且易出错. 考虑搭建一套可以满足现有场景的上线系统. 二 .为何采用ansible+shell方式 1.可控性(完全自主拥 ...

  6. XML文件中关键字自动提示和不全配置

    一.获得mybatis-3-config.dtd.mybatis-3-mapper.dtd 这两个文件. 建立一个Maven的项目 在Pom.xml文件中的Mybatis jar包的下载设置(也可以从 ...

  7. golang log

    自带log模块 写入文件 package main import ( "fmt" "log" "os" ) func main(){ log ...

  8. ACE学习综述(1)

    1. ACE学习综述 1.1. ACE项目的优点 可以跨平台使用,基本上可以实现一次编写,多平台运行. ACE本身不仅仅是一个简单的网络框架,对于网络框架涉及到的进程管理.线程管理等系统本身相关的内容 ...

  9. Ubuntu下使用Git_5

    还欠大家最后一篇Git的学习. Git的下一个内容,标签,标签是为了更方便的参考提交而给他表上通俗易懂的名称 Git可以使用两种标签,轻标签和注解标签,打上的标签是固定的,不能向分支那样可以移动位置, ...

  10. MyBatis整体了解

    背景资料 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBati ...