Flux的使用流程

一、Flux 组成部分

• View： 视图层 （ 用React的组件来代替 ）
• ActionCreators（动作创造者）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数
• Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

二、Flux的流程：

1. 组件获取到store中保存的数据挂载在自己的状态上 用户产生了操作，调用actions的方法
2. actions接收到了用户的操作，进行一系列的逻辑代码、异步操作
3. 然后actions会创建出对应的action，action带有标识性的属性
4. actions调用dispatcher的dispatch方法将action传递给dispatcher
5. dispatcher接收到action并根据标识信息判断之后，调用store的更改数据的方法
6. store的方法被调用后，更改状态，并触发自己的某一个事件
7. store更改状态后事件被触发，该事件的处理程序会通知view去获取最新的数据

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

/* 
  1. 我们现在要创建 store,但是store有两个功能
      1.1 存储数据
      1.2 数据改变，视图才能更新 【 事件的发布和订阅来完成 】
*/

const events = require( 'events' )

const EventEmitter = events.EventEmitter 

// console.log( EventEmitter.prototype )


const store = {
  ...EventEmitter.prototype, // 浅拷贝 数据的更新，视图更新
  state: { // 数据存储
    count: 0
  },
  getState () {
    return this.state.count     // 获取数据的方法
  }
}

export default store


// // 事件的发布

// store.on('aa',function () {
//   console.log('aa')
// })

// // 事件的订阅

// store.emit('aa')

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

import React ,{ Component} from 'react';
import store from '../../store/index';

class Home extends Component {

   constructor(){
      super()
      this.state={
         count:store.getState().count
      }
   }

   render(){
      return(
         <div>
            <h3>flux</h3>
            <p> {this.state.count} </p>
         </div>
      )
   }
}
export default Home;

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

6、创建actionCreators.js
actions的发送要通过dispatcher来发送

import * as type from './type';
import dispatcher from './dispatchers';

const actionsCreators = {
   increment(){
      //创建动作
      let actions ={
         type:type.INCREMENT
      }
      dispatcher.dispatch(actions)
   }
}

export default actionsCreators;

7.创建dispatcher.js

import { Dispatcher } from 'flux'
import * as type from './type'
import state from './state'
const dispatcher = new Dispatcher()

// 注册dispatcher 
dispatcher.register(( action ) => {
  switch ( action.type ) {
    case type.INCREMENT:
      // 修改数据
      state.count ++ 
      console.log( state.count)
      
      break;
  
    default:
      break;
  }
})


export default dispatcher

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

当我们点击按钮是，要通过store的事件的订阅给当前组件的state重新赋值，要想这样做，我们必须进行事件的发布

• 这个事件的发布往哪里写？
  - 组件的生命周期中，数据可以进行一次修改的可以往 componentWillMount // componentDidMount
• 这个事件的订阅那里写？
  当我们点击按钮的时候，就要修改当前组件的state,也就是要进行事件的订阅

import React ,{ Component} from 'react';
import store from '../../store/index';
import actionsCreators from '../../store/actionsCreators';

class Home extends Component {

   constructor(){
      super()
      this.state={
         count:store.getState().count
      }
   }

   increment=() =>{
      actionsCreators.increment()
      store.emit('add');
   }

   componentDidMount(){
      store.on('add',()=>{
         this.setState({
            count:store.getState().count,
         })
      })
   }
   render(){
      return(
         <div>
            <h3>flux</h3>
            <button onClick= {this.increment} >增加</button>
            <p> {this.state.count} </p>
         </div>
      )
   }
}
export default Home;