Flux使用流程

浅浅的花香味﹌ 2022-01-11 06:57 258阅读 0赞

## Flux ##

Flux是Facebook用来创建客户端web应用的一种架构模式，它使用单向数据流方式实现了React组件的复合和通信。  
贯穿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

1.  将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>
            )
          }
        }

1.  用户操作，用户点击按钮，执行当前组件中的方法，这个方法的逻辑实际上是actionCreators中的方法
2.  创建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
3.  创建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
4.  通过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;