专栏首页菜鸟计划redux基础概念及执行流程详解

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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • redux工程化结构

    柴小智
  • vue组件详解(一)——组件与复用

    一、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 二、组件用法 组件需要注册后...

    柴小智
  • vue小白快速入门

    一、vue是什么 Vue 是一套用于构建用户界面的渐进式框架。 压缩后仅有17kb 二、vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被...

    柴小智
  • 列举MJExtension中的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

    用户1451823
  • MYSQL5.6优化器的一个新特性MMR

    一、什么是MRR MMR全称是Multi-Range Read,是MYSQL5.6优化器的一个新特性,在MariaDB5.5也有这个特性。优化的功能在使用二级索...

    MySQL轻松学
  • MYSQL5.6优化器的一个新特性MRR

    MMR全称是Multi-Range Read,是MYSQL5.6优化器的一个新特性,在MariaDB5.5也有这个特性。优化的功能在使用二级索引做范围扫描的过程...

    MySQL轻松学
  • 探索 模块打包 exports和require 与 export和import 的用法和区别

       CommoneJS规定每个文件是一个模块。将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前...

    tandaxia
  • 科学家通过模仿动物提升无人机性能

    荷兰瓦赫宁根大学(Wageningen University)的研究人员正在为机器苍蝇编写程序,模仿翅膀受到不同程度损伤的苍蝇,藉此开发出在飞行中途受损后可继续...

    人工智能快报
  • 机器学习算法实践:树回归

    專 欄 ❈PytLab,Python 中文社区专栏作者。主要从事科学计算与高性能计算领域的应用,主要语言为Python,C,C++。熟悉数值算法(最优化方法,...

    Python中文社区
  • BEM 简介

    BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Eleme...

    Joel

扫码关注云+社区

领取腾讯云代金券