看我们3天 hackday 都干了些什么

于是，对于复杂 component 交互的情景，facebook 提供了 flux 架构设计（当然也实现了https://github.com/facebook/flux）

这个图估计大家被各种 facebook 的 jsconf 洗过脑了，单向的数据流，中间加了一大堆东西

• action：要干什么
• dispatcher：到哪里去
• store：变什么/如何变

基本思想就是把一个 component 想干的事情弄成 action，dispatcher 会为不同的 action 调用不用的 store 中的 reducer，store 真正管理着 component 的状态。 把引起状态变化的每一部都分解出来。恩，大型项目一定要这么分解才算大型，没有什么问题。

原文思想如下，facebook 的表达能力我也是给跪了:

思想是不错，但是看看例子，这个dispacher 是怎么个回事

AppDispatcher.register(function(action) {
  var text;

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();
      if (text !== '') {
        create(text);
        TodoStore.emitChange();
      }
      break;

    case TodoConstants.TODO_TOGGLE_COMPLETE_ALL:
      if (TodoStore.areAllComplete()) {
        updateAll({complete: false});
      } else {
        updateAll({complete: true});
      }
      TodoStore.emitChange();
      break;
...

我一直以为 dispatcher 应该自动给我 dispatcher 才对，我自己都 dispatcher 完了还要 dispatcher 干什么？

于是 redux 出来把 dispatcher 这一步去掉了，然后放到了 reducer 里：

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

然后就获得了一片好评

我竟无言以对…

Channel 是 CSP 具体可以参考我的另一篇文章 http://blog.oyanglul.us/javascript/clojure-core.async-essence-in-native-javascript.html 的概念，类似一个队列，一边进，一边出。 不过进和出都是异步的

const {chan, take, put} = require('con.js/async').async
let c = chan()
take(c).then(_=>console.log(_))
put(c, 'hehe')
// "hehe"

Pub(blication) 可以指定把 Channel 的某一部分发布出去，让 Sub(scribe) 来 订阅。

const {chan, take, put, pub, sub} = require('con.js/async').async
let inputChan = chan()
let actionPub = pub(inputChan, _=>_.action)
let outputChan = chan()
let actionSub = sub(actionPub, 'greeting', outputChan)
put(inputChan, {action: 'greeting', value: 'Hello Clojure pubsub'})
put(inputChan, {action: 'party', value: 'wheeeee'})
take(outputChan).then(_=>console.log(_))
// {action: 'greeting', value: 'Hello Clojure pubsub'}

绑定到 outputChan 的 sub 只会接收 action 为 greeting 的消息

首先声明：Transducer 不是柯里化，不是柯里化，不是柯里化！

在 Clojure 1.7 之后，当 map，filter之类的函数只接收一个函数时返回 transducer。transducers 是可以重用，组合，应用到各种集合与 Channel 上的特殊函数。 专门写过一篇文章介绍过 http://blog.oyanglul.us/javascript/clojure-essence-in-javascript-transducer.html

const {chan, map, take, put} = require('con.js/async').async
let xf = map(_=>_*2)
let c = chan(32, xf)
put(c, 3)
take(c, _=>console.log(_))
// 6

原子这个名字起得好，函数式编程的数据结构都是 immutable 的，如果多线程需要共享资源，那么函数式如何解决？

解决多线程通常我们会加锁，有锁的操作就相当于原子操作，在操作共享资源的时候，不用操心值会突然被别的线程改掉。

但是 atom 使用另外一种方式实现原子操作， atom 类似容器，ref 会指到当前的值到底是哪一个。然后，操作 atom 必须使用原子操作 swap!，swap! 能保障 原子性的原理非常简单，就是尝试将新值放到 atom 中，如果当前 ref 和 换出来的值不一样了，说明另一个线程也在 swap! 这个 atom。swap! 会从头再来一遍。

当我们有很多的 channel 是会并发的操作 state，所以这里我们需要使用 atom 来保证我们的 setState 是原子操作。

由于是使用 transducer 来替代 redux 的 reducer，我给新框架 山寨 响亮的叫做 Transdux ！

来看看我们 EDD 的第一版实现，是多么的简单

 1: componentDidMount(){
 2:   // -------vv code user should write vv------------------
 3:   function complete(msg){
 4:     return state=>map(todo=>{
 5:       if(todo.get('id')==msg.id)
 6:         return updateIn(todo, ['completed'], _=>!_ )
 7:         return todo
 8:     }, state)
 9:   }
10:   // ---------------------------------
11: 
12:   // ---------- code should extract to transdux -------------------
13:   let tx = map((msg)=>{
14:     return toJs(complete(msg)(extra.toClj(this.state.todos)))
15:   });
16: 
17:   let completeChan = chan(1, tx);
18: 
19:   sub(this.props.pub, "Todo.complete", completeChan);
20: 
21:   function takeloop(chan, action){
22:     take(chan).then(action).then(takeloop.bind(null, chan,action))
23:   }
24:   takeloop(completeChan, (newtodos)=>{
25:     this.setState({todos: newtodos})
26:   })
27:   // ----------
28: }

没有错，跟 TDD 一样，先实现，在重构 目的非常明确，用户只需要定义，我这个 component 能干什么，所以这里第3行，就说我 是 todo 我能 complete

然后华丽的分割线下面是我们框架要做的事情

1. 一个用用户提供的 action 组成的 transducer
2. 一个 action channel，用来绑定 transducer
3. 一个 sub， 只订阅 “todo.complete” 的消息
4. 一个 loop，不停的去 action channel 那新的 state

那么在使用的地方，只需要发一个 action 为“todo.complete” 的消息即可

当然我们需要封装这些裸裸的实现，当然提取这一票代码块特别简单，写一个 mixin 让需要用到的 component 自己 mixin 进来就好。

问题是，我们需要知道这个 Component 用到的 input channnel 和 publication 是谁。

<Transdux>
    <App/>
</Transdux>

<div>
  <Transdux>
    <App/>
  </Transdux>
  <Transdux>
    <App2/>
  </Transdux>
</div> 

childContextTypes: {
    transduxChannel: React.PropTypes.object,
    transduxPublication: React.PropTypes.object,
  },
  getChildContext(){
    let inputchan = chan();
    return {
      transduxChannel: inputchan,
      transduxPublication: pub(inputchan, _=>_['action']),
    }
  },

import MainSection from './MainSection'
let TodoItem = React.createClass({
    mixins: [TxMixin],
 ...
           this.dispatch(MainSection, 'complete',{id:todo.id})
...
    }
})

 1: bindActions(actions, imm=id, unimm=id) {
 2:   let atomState = atom(imm(this.getInitialState()))
 3:   for(let name in actions){
 4:     let tx = map((msg)=>{
 5:       let result = swap(atomState, (state,v)=>actions[name](v,state), msg.value)
 6:       this.setState(unimm(result))
 7:       return result
 8:     });
 9:     let actionChan = chan(32,tx);
10:     sub(this.context.transduxPublication, genUuid(this.constructor)+name, actionChan);
11:     observe(actionChan, (newstate)=>{});
12:   }
13: },

(defn ^:export observe [chan cb]
  (go-loop []
    (let [v (async/<! chan)]
      (cb v)
      (recur))))

<Transdux>
    <App/>
</Transdux>

// MainSection.jsx
import {TxMixin} from 'transdux'
let actions = {
  complete(msg, state){
    return {
      todos:state.todos.map(todo=>{
        if(todo.id==msg.id)
          todo.completed = !todo.completed
        return todo
      })
    }
  },
  clear(msg,state){
    return {
      todos: state.todos.filter(todo=>todo.completed==false)
    }
  }
}
let MainSection = React.createClass({
  mixins: [TxMixin],
  componentDidMount(){
    this.bindActions(actions)
  },
  ...
})

然后，就可以开始 发消息 了

//TodoItem.jsx
import MainSection from './MainSection'
let TodoItem = React.createClass({
    mixins: [TxMixin],
    ...
      this.dispatch(MainSection, 'complete',{id:todo.id})
    ...
    }
})

最后，要感谢我们棒棒的 Team member @SanCoder-Q @zhangyaxuan @nihaokid @xiaoyanzhuzzh

最后，欢迎 Fork me on Github

所有图片来源于 giphy.com, copyright @Futurama