React中的一个状态管理工具—Flux

纸飞机 发表于 2021/10/22 23:46:05 2021/10/22
【摘要】 Flux出现的原因 Flux的出现和传统MVC有关,因为传统的MVC架构没有解决,M和V之间的交互关系 为了弥补这个缺陷,人们相处了 Flux Redux Mobx 这样三种架构思维 ...

Flux出现的原因

Flux的出现和传统MVC有关,因为传统的MVC架构没有解决,M和V之间的交互关系

为了弥补这个缺陷,人们相处了 Flux Redux Mobx 这样三种架构思维 , 那么React只是这三种架构的一个组成部分,那么这个组成部分充当的是 View( 视图 )

注意: Flux Redux Mobx 和 MVC 是同一级别的,相比之下, vuex级别要小的多 ,但是他们解决的都是多组件状态共享

问题:我想在Redux中使用vue , 可以吗? 可以的

Flux案例书写

案例中:点击 计数

要想使用FLux架构思维,需要通过一个工具进行使用, 这个工具就是flux

所以,我们需要安装Flux依赖-生产环境

yarn add flux
  
 

    在src目录下 新建store目录,里面新建index.js

    为什么store要拿到on和emit方法?

    答:数据改变,视图更新( 要靠事件来执行,也就是要进行事件的订阅和发布 )

    /*
      当前的index.js文件就是 我们 flux组成部分中  store 
    
      store的功能:
        1. 数据的存储者
        2. 数据改变,视图更新( 要靠事件来执行,也就是要进行事件的订阅和发布 )
     */
    const EventEmitter = require( 'events' ).EventEmitter
    
    // console.log(EventEmitter.prototype)  //打印发现on和emit方法在EventEmitter.prototype上
    
    //将on和 emit解构在
    const store = {
        ...EventEmitter.prototype,
        state : {
            count : 0
        },
        getState () {
            return this.state
        }
    }
    
    export default store
    
      
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    将store中的数据显示在组件(视图)中

    import store from './store'
    
    class App extends React.Component {
    
      constructor () {
        super()
        this.state={
          count : store.getState().count
        }
      }
    
      render () {
        let { count } = this.state
        return (
            <div className="App">
                <p>count为: { count }</p>
            </div>
          )
      }
      
    }
    
    export default App;
    
      
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    用户操作,用户点击按钮,执行当前组件中的方法,这个方法的逻辑实际上是actionCreators中的方法

    创建actionCreators.js

    import * as type from './type'
    import dispatcher from './dispatcher'
    
    const actionCreators = {
        increment () {
            //创建动作
            let actions = {
               type : type.INCRMENT   
            }
            //dispatcher来通过dispatch 发送 actions
            dispatcher.dispatch( actions )
        }
    }
    
    export default actionCreators
    
      
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    再建立dispatcher.js

    import { Dispatcher } from 'flux'
    import * as type from './type'
    import store from './index'
    
    const dispatcher = new Dispatcher()
    
    //dispatcher.register( callback )
    
    dispatcher.register( (actios) => {
        switch( actios.type ) {
            case type.INCRMENT:
                store.state.count++;
                break;
            default:
                break;
        }
    })
    
    export default dispatcher
    
      
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    通过store的事件的发布和订阅进行 当前组件中 state 的重新赋值

    • 当我们点击按钮是,要通过store的事件的订阅给当前组件的state重新赋值,要想这样做,我们必须进行事件的发布
    • 难点: 这个事件的发布往哪里写?
    • 组件的生命周期中,数据可以进行一次修改的可以往 componentWillMount // componentDidMount
    • 难点: 这个事件的订阅那里写?
    • 当我们点击按钮的时候,就要修改当前组件的state,也就是要进行事件的订阅

    最后的步骤:

    1. 引入 actionCreators
    2. 事件订阅
    3. 事件发布
    import React from 'react';
    
    import store from './store'
    import actionCreators from './store/actionCreators'
    
    class App extends React.Component {
    
      constructor () {
        super()
        this.state={
          count : store.getState().count
        }
      }
    
      increment () {
        actionCreators.increment()
        store.emit('count')//事件发布
      }
    
      componentDidMount () {//在组件装载前有一次修改数据的机会
        store.on('count',()=>{//事件订阅
          this.setState({
            count : store.getState().count
          })
        })
      }
    
      render () {
        let { count } = this.state
        return (
            <div className="App">
                <button onClick={ this.increment }>count+</button>
                <p>count为: { count }</p>
            </div>
          )
      }
      
    }
    
    export default App;
    
      
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    在这里插入图片描述

    好了,功能完成了

    文章来源: root181.blog.csdn.net,作者:前端纸飞机,版权归原作者所有,如需转载,请联系作者。

    原文链接:root181.blog.csdn.net/article/details/120908879

    【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
    • 点赞
    • 收藏
    • 关注作者

    评论(0

    0/1000
    抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。