React ( flux使用流程及流程图 )

传统MVC的缺陷

• 传统MVC没有解决 M 和 V 之间的交互关系

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

• Flux Redux Mobx 和 MVC 是一个级别的，相比之下， vuex级别要小的多 ，但是他们解决的都是多组件状态共享

• 问题： 我想在Redux中使用vue , 可以吗？ 可以的

Flux

案例： 点击 计数

Flux架构的使用需要借助一个工具， 这个工具叫做 flux

Flux的使用流程

1. 要想使用FLux架构思维，需要通过一个工具进行使用， 这个工具就是flux
2. 安装 flux
   $ yarn add flux
3. 在src目录下 新建store目录，里面新建index.js
   • store有两个功能
     • 存储数据
     • 当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ）

    // store/index.js

    const EventEmitter = require( 'events' ).EventEmitter

    const store = {
      ...EventEmitter.prototype,
      state: {
        count: 0
      },
      getState () {
        return this.state
      }
    }
    export default store 

4. 将store中的数据显示在组件（视图）中

  import store from './store'

  class xxx extends React.Component{
    constructor () {
      super()
      this.state = {
        count: store.getState().count
      }
    }

    render () {
      return (
        <div>
          <p> { this.state.count } </p>
        </div>
      )
    }
  }

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

6. 创建actionCreators.js

   • actions的发送要通过dispatcher来发送

   
       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
   
   

7. 创建dispatcher.js

     import { Dispatcher } from 'flux';
     import * as type from './type'
     import state from './state'
     const dispatcher = new Dispatcher()
   
     // dispatcher.register( callback )
   
     dispatcher.register( ( actions) => {
       switch ( actions.type ) {
         case type.INCRMENT:
             // 用户操作了
             state.count++
           break;
       
         default:
           break;
       }
     })
   
     export default dispatcher
   

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

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

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';

  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 () {
      return (
        <div>
          <h3> flux </h3>
          <button onClick = { this.increment }> + </button>
          <p> count: { this.state.count } </p>
        </div>
      )
    }
  }

  export default App;