Flux流程

Flux流程

1、要想使用Flux架构思维，需要通过一个工具进行使用， 这个工具就是flux

2、安装 flux $ yarn add flux

3、在src目录下 新建store目录，里面新建index.js

• store有两个功能

  • 存储数据

  • 当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，重新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ）

    // store/index.js
    //store的作用：
    //1、存储数据  2、更新视图（也即给了store事件发布on和订阅emit的能力）
      const EventEmitter = require( 'events' ).EventEmitter
    
      const store = {
        ...EventEmitter.prototype,//解构这，使得store上有on和emit
        state: {//定义数据
          count: 0
        },
        getState () {//获取数据的方法
          return this.state
        }
      }
      export default store 
    

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

import store from './store'

  class xxx extends React.Component{
    constructor (props) {
      super(props)
      this.state = {
        count: store.getState().count//从store中获取数据
      }
    }

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

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

6、创建actionCreators.js

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

  //actionCreators作用：
  //1、用户交互，也就是所谓的事件  2、创建动作，然后发送给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
  

• 创建dispatcher.js

  //作用：动作的触发者，用于修改数据
  import { Dispatcher } from 'flux';
    import * as type from './type'
    import state from './state'
    const dispatcher = new Dispatcher()
  
    // dispatcher.register( callback ) dispatcher的注册
  
    dispatcher.register( ( actions) => {
      switch ( actions.type ) {
        case type.INCRMENT:
            // 用户操作了
            store.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 = {
        num: store.getState().count
      }
    }

    add () {//点击按钮时触发订阅
      actionCreators.increment()
      store.emit('zengjia')
    }

    componentDidMount () {//组件初始化时，就做视图更新的事件发布
      store.on('zengjia', () => {
        this.setState({
          count: store.getState().count
        })
      })
    }

    render () {
      return (
        <div>
          <h3> flux </h3>
          <button onClick = { this.add }> + </button>
          <p> count: { this.state.count } </p>
        </div>
      )
    }
  }

  export default App;