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 ...
随机推荐
- rm -f 后如何恢复
前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库. ...
- FastDFS 配置文件 tracker.conf
FastDFS 版本5.05 配置文件分为三部分 控制器:tracker.conf存储器:storage.conf 客户端:client.conf 文件位置:/etc/fdfs 基本配置(基础配置 ...
- 杭电-------2046骨牌铺方格(C语言写)
#include<stdio.h> ] = { }; long long recrusion(int n) { || a[n]>) { return a[n]; } ) + recr ...
- 【5min+】 设计模式的迷惑?Provider vs Factory
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- 显示二维码-智能TFT模块
应用范例: 使用 TOPWAY Smart LCD (HMT050CC-C) 显示二维码 第一步 建立工程 ① 开 Editor 软件, 点击菜单栏建立新工程File --> New Proje ...
- #《Essential C++》读书笔记# 第四章 基于对象的编程风格
基础知识 Class的定义由两部分组成:class的声明,以及紧接在声明之后的主体.主体部分由一对大括号括住,并以分号结尾.主体内的两个关键字public和private,用来标示每个块的" ...
- day16 匿名函数
# 匿名函数# 函数名 = lambda 参数1,(参数2,....) : 返回值 [注意:匿名函数不允许换行]# 匿名函数返回值和正常函数一样可以是任意数据类型# def add(x,y):# re ...
- fatal: HttpRequestException encountered
报错:fatal: HttpRequestException encountered 解决方法 Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行. ...
- CSRF防护
CSRF防护 (待完善...)
- Gin框架之参数绑定
为了能够更方便的获取请求相关参数,提高开发效率,我们可以基于请求的Content-Type识别请求数据类型并利用反射机制自动提取请求中QueryString.form表单.JSON.XML等参数到结构 ...