redux基础概念及执行流程详解
一、执行流程
全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==》redux就是这种解决方案:redux只有一个作用,就是为了实现组件之间的信息交互。
1.执行createStore
- 创建一个容器store来用来管理公用的状态信息
- 创建一个事件池,用来存储一些方法(方法一般都是用来通知某个组件重新渲染的)
- 当容器中的状态改变,会自动通知事件池中的方法依次执行
2.基于store.getState可以获取容器中存储的状态信息(拿到状态信息就可以做数据绑定等操作了)
3.我们可以基于store.subscribe向事件池中追加方法(也可以移除事件池中的方法)
4.修改容器中的状态信息
- 首先雇一个管理员reducer,它就是用来修改容器中状态的
- 当我们在组件中进行某些操作想要修改状态信息的时候,我们首先dispatch派发一个任务给reducer,并且告诉reducer如何去修改状态信息
公共状态信息都是reducer去改的,reducer记录了所有修改状态的行为方式,我们以后想要知道怎么改的状态,只要看reducer即可。
- redux:不局限于任何框架(vue/react/angular/jquery...)
- react-redux:把redux进一步封装,专门给react框架开发的(操作起来更简洁)
- vuex:类似于redux的操作思想,专门为vue框架定制的
- dva:把redux/react-redux进一步封装,操作更简洁
- mobx:和redux不完全一致,也是用来管控公共状态的,只不过操作起来更加简单而已
画一张简易流程图
2.具体代码
- App.js
- import {createStore} from 'redux'
- /**
- * 创建redux容器用力啊管理公共的状态信息
- * 1.创建容器的时候其实已经准备好了管理员reducer了
- * 2.createStore(reducer):相当于创建一个容器并雇佣了一个管理员reducer
- * 3.创建出来的store存在几个属性:getState/dispatch/subscribe
- */
- let store = createStore(reducer);
- window.store = store; //把创建的容器挂载到全局下,保证每一个子组件都可以获取到store,从而执行一些其它的操作(当然也可以基于属性)
- //reducer管理员是一个方法:reducer方法是在dispatch派发的时候执行的
- //state:现有store容器中的状态信息(如果store中没有,我们给一个初始值)
- //action: 告诉reduce如何去修改状态都在action中(它是一个对象,对象中固定的有type属性:派发任务的行为标识,reducer就是根据不同的行为标识来修改状态信息的)
- function reducer(state = {
- n: 0,
- m: 0
- }, action) {
- //reducer就是根据不同的行为标识来修改状态信息的
- switch (action.type) {
- case 'support': state.n = state.n+1;break;
- case 'against': state.m = state.m+1;break;
- }
- return state; //return的是什么,就会把store中的状态改成什么
- }
- <Vote></Vote> //调用
- vote.js
- import React from 'react';
- import VoteHeader from './voteHeader.js'
- import VoteBody from './voteBody.js'
- import VoteFooter from './voteFooter.js'
- class Vote extends React.Component{
- constructor(){
- super()
- }
- render() {
- return (
- <div>
- <VoteBody></VoteBody>
- <VoteFooter></VoteFooter>
- </div>
- )
- }
- }
- export default Vote;
- voteBody.js
- import React from 'react';
- class VoteBody extends React.Component{
- constructor(){
- super()
- }
- componentDidMount() {
- //通过subscribe追加事件,进行强制更新
- window.store.subscribe(()=>{
- this.forceUpdate();
- })
- }
- render() {
- //获取状态的改变
- let {n, m} = window.store.getState();
- return (
- <div>
- <div>赞成{n}票</div>
- <div>反对{m}票</div>
- </div>
- )
- }
- }
- export default VoteBody;
- voteFooter.js
- import React from 'react';
- class VoteFooter extends React.Component{
- constructor(){
- super()
- }
- render() {
- let store = window.store;
- return (
- <div>
- //通过dispatch通知reducer根据不同的标示修改不同的状态
- <button onClick={e => store.dispatch({type: 'support'})}>赞成</button>
- <button onClick={e => store.dispatch({type: 'against'})}>反对</button>
- </div>
- )
- }
- }
- export default VoteFooter;
redux基础概念及执行流程详解的更多相关文章
- git概念及工作流程详解
git概念及工作流程详解 既然我们已经把gitlab安装完毕[当然这是非必要条件],我们就可以使用git来管理自己的项目了,前文也多多少少提及到git的基本命令,本文就先简单对比下SVN与git的区别 ...
- Spring 框架基础(06):Mvc架构模式简介,执行流程详解
本文源码:GitHub·点这里 || GitEE·点这里 一.SpringMvc框架简介 1.Mvc设计理念 MVC是一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集 ...
- Spark SQL底层执行流程详解
本文目录 一.Apache Spark 二.Spark SQL发展历程 三.Spark SQL底层执行原理 四.Catalyst 的两大优化 一.Apache Spark Apache Spark是用 ...
- android invalidate 执行流程详解
invalidate()函数的主要作用是请求View树进行重绘,该函数可以由应用程序调用,或者由系统函数间接 调用,例如setEnable(), setSelected(), setVisiblity ...
- springmvc的执行流程详解
1.什么是MVC MVC是Model View Controller的缩写,它是一个设计模式 2.springmvc执行流程详细介绍 第一步:发起请求到前端控制器(DispatcherServlet) ...
- AngularJS执行流程详解
一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库, ...
- AngularJS执行流程详解(转)
一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库, ...
- 【C# 基础概念】Unicode编码详解
Unicode定义:Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字 ...
- 【C#基础概念】枚举 (enum详解)
我们重点来讲解 简单枚举和标志枚举的用法和区别 继承 Object-> ValueType ->Enum Object-> ValueType ->struct 包括int f ...
随机推荐
- CodeForces 429B Working out DP
E - Working out Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Su ...
- docker实战部署Javaweb项目
一.部署环境说明 docker服务版本:version 18.09.0nginx服务版本:version: nginx/1.15.10redis服务版本:version: redis/5.0.3tom ...
- zabbix-agent TIME_WAIT 过多(转)
一.系统环境 操作系统: Centos 6.4 64bit zabbix-agent 版本: Zabbix agent v2.2.7 (revision 50148) (24 October 2014 ...
- AVR单片机教程——示波器
本文隶属于AVR单片机教程系列. 在用DAC做了一个稍大的项目之后,我们来拿ADC开开刀.在本讲中,我们将了解0.96寸OLED屏,移植著名的U8g2库到我们的开发板上,学习在屏幕上画直线的算法, ...
- java开发JSP+Servlet+bootstrap开发电影院购票系统 源码
基于JSP+Servlet+bootstrap开发电影院购票系统:开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+Mysql数据库 程序要求:电影院订票系统 用 ...
- 通过HTML和CSS1:1还原风暴英雄官方网站
<!--HTML代码--> <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 异常 lock buffer failed for format 0x23
02-11 21:21:45.669625 14804 14815 W Monkey : // java.lang.RuntimeException: lock buffer failed for f ...
- mysql数据库批量执行sql文件对数据库进行操作【windows版本】
起因: 因工作需要,在本机测试环境升级mysql数据库,需逐条执行mysql数据库的sql文件对数据库进行升级,因此找了些关于mysql的文章,对批量升级数据库所需的sql文件进行升级. 整理思路: ...
- 微软帮助类SqlHelper
using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collect ...
- c++输入输出,保留几位小数
#include <iomanip> //头文件 //第一种写法 cout<<setiosflags(ios::); //第二种写法 cout.setf(ios::fixed) ...