Redux是一款状态管理库,并且提供了react-redux库来与React亲密配合, 但是总是傻傻分不清楚这2者提供的API和相应的关系。这篇文章就来理一理。

如果要用一句话来概括Redux,那么可以使用官网的这句话:Redux是针对JavaScript应用的可预测状态容器。此句话虽然简单,但包含了以下几个含义:

可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念,每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。
状态容器(state container): state是集中在单一个对象树状结构下的单一store,store即是应用程序领域(app domain)的状态集合。
JavaScript应用: 这说明Redux并不是单指设计给React用的,它是独立的一个函数库,可通用于各种JavaScript应用。
Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。

具体的模型图如下图所示:

为了说明整个模型的运作流程,首先我们需要弄清Redux模型中的几个组成对象:action 、reducer、store。

action:官方的解释是action是把数据从应用传到 store 的有效载荷,它是 store 数据的唯一来源;要通过本地或远程组件更改状态,需要分发一个action;
reducer:action发出了做某件事的请求,只是描述了要做某件事,并没有去改变state来更新界面,reducer就是根据action的type来处理不同的事件;
store:store就是把action和reducer联系到一起的对象,store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。
在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 ,在一个应用程序中只能有一个store对象。当一个store接收到一个action,它将把这个action代理给相关的reducer。reducer是一个纯函数,它可以查看之前的状态,执行一个action并且返回一个新的状态。

Redux
Redux 三大核心
Redux的核心由三部分组成:Store, Action, Reducer。

Store : 是个对象,贯穿你整个应用的数据都应该存储在这里。
Action: 是个对象,必须包含type这个属性,reducer将根据这个属性值来对store进行相应的处理。除此之外的属性,就是进行这个操作需要的数据。
Reducer: 是个函数。接受两个参数:要修改的数据(state) 和 action对象。根据action.type来决定采用的操作,对state进行修改,最后返回新的state。

react与redux的一点心得(理解能力有限,蜗牛进度)的更多相关文章

  1. React 和 Redux理解

    学习React有一段时间了,但对于Redux却不是那么理解.网上看了一些文章,现在把对Redux的理解总结如下 从需求出发,看看使用React需要什么 1. React有props和state pro ...

  2. 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。

    前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...

  3. 谈谈选用技术的原则,技术学习方法技巧,阅读代码的技巧及其它 MSF的一点心得

    谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...

  4. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  5. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  6. 【前端,干货】react and redux教程学习实践(二)。

    前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...

  7. React、Redux 和 Bootstrap

    使用 React.Redux 和 Bootstrap 实现 Alert 今天,我们来学习使用 React.Redux 和 Bootstrap 实现Alert. 例子 这个例子实现了弹出不同类型信息的功 ...

  8. 【13】react 之 redux(2)

    转载:http://www.cnblogs.com/MuYunyun/p/6530715.html 什么情况需要用redux? 用户的使用方式复杂 不同身份的用户有不同的使用方式(比如普通用户和管理员 ...

  9. react第十九单元(react+react-router-dom+redux综合案例1)

    第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...

随机推荐

  1. 2018-8-10-win10-sdk-是否向下兼容

    title author date CreateTime categories win10 sdk 是否向下兼容 lindexi 2018-08-10 19:16:53 +0800 2018-2-13 ...

  2. Django入门3--Models

  3. P1111 朋友关系判定

    题目描述 有n个人和m对关系,这n个人的编号从1到n. 而m对关系中,每对关系都包含两个人的编号A和B(1<=A,B<=n),用于表示A和B是好友关系. 如果两个数A和B不在好友关系中,则 ...

  4. 【codeforces 761C】Dasha and Password(动态规划做法)

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  5. H3C 静态路由配置

  6. P1009 字符三角形

    题目描述 输入一个字符c,按照阳历输出的格式输出由该字符组成的一个字符三角形. 输入格式 输入包含一个字符c. 输出格式 输出由该字符c组成的字符三角形. 样例输入 A 样例输出 A AAA AAAA ...

  7. VS2017 OpenCV3.4.2 通过Release的版本 源码编译成 x86

    官方release的OpenCV3..2版本只有64bit,由于项目需要,现在把它重新编译成x86的库. 下载源码: github官方仓库 https://github.com/opencv/open ...

  8. 【31.95%】【CF 714B】Filya and Homework

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  9. CF526F Pudding Monsters

    CF526F Pudding Monsters 题目大意:给出一个\(n* n\)的棋盘,其中有\(n\)个格子包含棋子. 每行每列恰有一个棋子. 求\(k*k\)的恰好包含\(k\)枚棋子的子矩形个 ...

  10. hdu 6852Path6(最短路+最小割)

    传送门 •题意 有n个城市,标号1-n 现花费最小的代价堵路 使得从1号城市到n号城市的路径边长 (注意只是变长不是最长) 堵一条路的代价是这条路的权值 •思路 在堵路以前,从1到n的最小路径当然是最 ...