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. h5移动端页面meta标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  2. 素数环 南阳acm488(回溯法)

    素数环 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 有一个整数n,把从1到n的数字无重复的排列成环,且使每相邻两个数(包括首尾)的和都为素数,称为素数环. 为了简 ...

  3. 杭电 1003 Max Sum (动态规划)

    参考:https://www.cnblogs.com/yexiaozi/p/5749338.html #include <iostream> #include <cstdio> ...

  4. LeetCode:18. 4Sum(Medium)

    1. 原题链接 https://leetcode.com/problems/4sum/description/ 2. 题目要求 给出整数数组S[n],在数组S中是否存在a,b,c,d四个整数,使得四个 ...

  5. Linux用户态程序计时方式详解[转]

    转自: http://www.cnblogs.com/clover-toeic/p/3845210.html 前言 良好的计时器可帮助程序开发人员确定程序的性能瓶颈,或对不同算法进行性能比较.但要精确 ...

  6. 构建Http服务器

    可以通过多种途径来构建服务器用以响应客户端请求(~不提供实现源码,网上有相应资源~) (1)使用ServerSocket构建服务器 (2)使用Servlet构建服务器 (3)使用HttpServer构 ...

  7. 「日常训练」Phone Numbers (CFR466D2C)

    题意(Codeforces 940C) 给定一字符串,求比它字典序大的字符串.限定其长度,并且只能用原串的字母. 分析 考虑原串长度lorigin与给定的长度lgiven.若给定长度大于原串长度,直接 ...

  8. 基于HTML5移动web应用

    一.基于HTML5移动web应用 1.canvas 绘图 2.多媒体 3.本地存储 4.离线应用 5.使用地理位置 6.移动web框架   二.具体说明 1.HTML5标准最大的变化就是支持Web绘图 ...

  9. Hyperledger02

    docker 思想 模块化: 集装箱 标准化: 运输标准化, 存储方式标准化,API接口的标准化 安全性: 隔离 docker解决什么问题 devops 我这程序程序没问题啊 系统好卡.哪个程序死循环 ...

  10. remix无法安装的解决方案

    无法安装的原因: 因为remix依赖python 执行python又依赖c++的环境 所以连环导致出错 https://github.com/nodejs/node-gyp 措施一:降级处理 先清理缓 ...