Flux

[sdfgrtyu]

鉴于本人学习能力较差，看书也看不进去，打算采用分享式的学习方法，分享几篇学习成果，看看学习效果，欢迎一起提问分享讨论，分享地址：非技术区

如图：Flux示意图。
如果某个用户准备和一个Web页面交互（单击按钮或者提交表单），此时一个Action会被创建用于表示用户的请求。一个Action会提供一组操作指令和需要变更的目标数据。Action是使用一个名为Dispatcher的中央控制组件分发的。Dispatcher的主要用途是将我们的Action排队，然后将它们分发到相应的Store中。一旦Store接收到了一个Action,会使用他作为操作指令修改State和更新View。数据流是单向的：Action到Dispatcher，然后是Sotre，最后到达View。
Action和State都是不可变数据。
1.View

 const Countdown=({count,tick,reset})=>{
            if(count){
                setTimeout(()=>tick(),1000)
            }
            return (count)?
                <h1>{count}</h1>:
                <div onlick={()=>reset(10)}>
                    <span>CELEBRATE!!!</span>
                  
                    </div>
        }

如上count是一个数字，tick和reset是一个函数，如果count不是0，就会在1秒之后触发Tick函数，如果是0，该view不会被任何Action生成器触发，直到用户点击了主Div触发了重置事件.
2.Action和Action生成器
Action提供的指令和数据主要的用途是Store用来修改State的。Action生成器就是函数，主要用来封装某个Action的具体细节。Action本身是由若干对象构成，并且至少包含一个类型字段。

 const countdownActions = dispatcher=>({
            tick(currentCount) {
                dispatcher.handleAction({type:'TICK'})
            },
            reset(count) {
                dispatcher.handleAction({
                    type: 'Reset',
                    count
                })
            }
        })

当倒计时Action生成器被载入时，dispatcher回作为参数传递给它。每次Tick或者Reset函数被调用，dispatcher的handleAction方法也会被调用，以便调度Action对象.
3.Dispatcher
永远只有一个Dispatcher，它表示空中交通管理中心。Dispatcher接收到Action，将与之相关的某些生成源一并打包，然后将它发送到相应的Store或者一系列Store，以便处理这个Action。

 import Dispatcher from 'flux'
       class CountdownDispatcher extends Dispatcher{
           handleAction(action){
               console.log('dispatching action:',action);
               this.dispatch({
                   source:'VIEW_ACTION',
                   action
               })
           }
       }

当handleAction被某个Action调用时，它会和该Action起始位置的某些数据一起被分发。当某个Store被创建后，他会被Dispatcher登记注册并开始监听相关的Action。当某个Action被分发后，他会按照一定的顺序被处理接受，然后发送到相应的Store。
4.Store
Store主要用于存放应用程序逻辑和State数据的若干对象。
当前的State数据可以通过访问Store的属性获得。某个Store需要修改State数据的所有操作指令都是由Action提供的。一旦数据被修改，该Store就会发出一个事件通知任何订阅了该Store的View，它们的数据发生了变化。

import {EventEmitter} from 'events'
      class CountdownStore extends EventEmitter{
          constructor(count=5,dispatcher){
              super()
              this._count=count
              this.dispatcherIndex=dispatcher.register(this.dispatch.bind(this))
          }
          }
          get count(){
              return this._count
          }
          dispatch(payload){
              const {type,count}=payload.action
              switch(type){
                  case "TICK":
                      this._count=this._count-1
                      this.emit("TICK",this._count)
                      return true;
                  case "RESET":
                      this._count=count
                      this.emit("RESET",this._count)
                      return true
              }
          }

Store会保存倒计时应用程序的State，即计数值。计数值可以通过一个只读属性访问。当Action被分发后，Store会使用他们来修改计数值。一个TICK aciton会减少计数值。一个REST Action会重置整个计数值，以及该Action引用的所有数据。
一旦State发生了变化，Store会发起一个事件到任何正在监听的View。
综合应用
现在如何将这些部分连接到一起：

 const appDispatcher = new CountdownDispatcher()
        const actions = countdownActions(appDispatcher)
        const store = new CountdownStore(10, appDispatcher)
        const render = count=>ReactDOM.render(
            <Countdown count={count} {...actions}/>,
        document.getElementById('react-container')
            )
        store.on('TICK',()=>render(store.count))
        store.on('RESET',()=>render(store.count))
        render(store.count)

首先，我们创建了appDispatcher,然后我们试用appDispatcher生成我们的Action生成器。最后，appDispatcher被注册到了Store中，并且Store将初始的计数值设为10.
render用于渲染包含计数的View，该计数值是通过参数传递的。同时还有Action生成器也作为属性被传递给了View。
最后，某些监听器被添加到了Store中，从而完成整个循环流程。当Store发起一个TICk或者RESEt，它产生了一个新的计数，因此需要马上在View中进行渲染，然后，初始View会根据Store中的计数值进行渲染，每次View发起一个TICK或者RESET时，该Action将会沿着循环节点发送，最终作为准备重新渲染的数据返回该View。7

[sdfgrtyu]

这个程序就是一个倒计时的计数器，第一次是10，然后触发render，触发1秒之后触发view里面的Tick，然后又触发render.......一直到0
不懂得地方可以留言。。。。。。

[圣殿骑士18]

你这不应该发移动开发板块么