baobab-react를 사용하여 경량 flux를 돌립니다.

react로 flux하고 있다면 그 사이클을 돌리는 것이 번거롭게 되지 않습니까? 난 됐어.
그래서 baobab-react입니다.

                                 ┌────────────────────┐
                   ┌──────────── │    Central State   │ ◀───────────┐
                   │             │    (Baobab tree)   │             │
                   │             └────────────────────┘             │
                Renders                                          Updates
                   │                                                │
                   │                                                │
                   ▼                                                │
        ┌────────────────────┐                           ┌────────────────────┐
        │        View        │                           │       Actions      │
        │ (React Components) │  ────────Triggers───────▶ │     (Functions)    │
        └────────────────────┘                           └────────────────────┘

1주가 이런 느낌으로 돌고 있습니다.
1개의 state tree가 있고 거기에서 유일하게 결정되는 view가 있고 view가 action를 발행하고 action는 state tree를 새롭게 한다.
확실히 요구하고 있던 경량 flux는 느낌입니다 매우 좋았습니다.

예를 들어 엄청난 카운터를 만들어 보겠습니다.

install

npm i -S baobab [email protected]
현재 최신의 2.0.0rc 는 잘 import를 할 수 없기 때문에 1개전의 버젼을 지정하고 있습니다.
2016-04-01 추가
현재 안정 버전은 1.0.1입니다.

state tree

애플리케이션의 모든 상태를 관리하는 하나의 상태 트리를 만듭니다.

tree.js

import Baobab from "baobab";

export default new Baobab({
  counter: 0
});

이런 식으로 state tree가 되는 object를 건네준 baobab의 인스턴스를 export합니다.

root component

index.js

import React from "react";
import {render} from "react-dom";
import {root} from 'baobab-react/higher-order';
import tree from "./tree";
import App from "./app";

const RootedApp = root(App, tree);
render(
  <RootedApp />,
  document.getElementById("app")
);

이런 식으로, 루트가 되는 컴퍼넌트는 baobab-react의 root 함수로 랩 한 것을 사용합니다.

2016-04-01 추가
현재 beta 2.0.0 에서는 higher/order 함수의 시그니처가 변경되어, Component 와 cursor 의 인수가 반대가 되는 것 같습니다.root(Component, tree) → root(tree, Component)

브랜치 구성 요소

모든 컴퍼넌트는 baobab-react의 branch로 랩 한 것을 사용하도록(듯이) 합니다.

app.js

import React from "react";
import {branch} from "baobab-react/higher-order";

export default branch(class App extends React.Component {
  handleClickPlus() {
    this.props.actions.addCount(1);
  }

  handleClickMinus() {
    this.props.actions.addCount(-5);
  }

  render() {
    return (
      <div>
        <h1>count: {this.props.counts}</h1>
        <button onClick={() => this.handleClickPlus()}>plus 1</button>
        <button onClick={() => this.handleClickMinus()}>minus 5</button>
      </div>
    );
  }
}, {
  actions: {
    addCount: (tree, value) => {
      const counter = tree.get(["counter"]);
      tree.set(["counter"], counter + value);
    }
  },
  cursors: {
    counts: ["counter"]
  }
});

2016-04-01 추가
여기도 루트 함수와 같고 Component와 cursor의 인수가 반대로 되어 있습니다.branch(App, Component) → root(cursors, Component)
branch는 branch(コンポーネントクラス, {actions: {}, cursors: {}})라는 느낌으로 만듭니다.
제 2 인수의 actions 에는 그 컴퍼넌트로 사용하는 액션 함수를 건네줍니다. key의 이름으로 props.actions 이하에 액션 함수가 등록됩니다. 여기에서 action을 등록해 두면 action 함수의 제1 인수에 tree 가 인젝션 되게 되므로, 원하는대로 state tree를 괴롭힐 수 있게 됩니다.
제 2 인수의 cursors 는 tree 의 참조를 나타내고 배열로 패스를 건네주면 tree 의 해당하는 값을 key의 이름으로 props 에 줍니다.

그리고는 browserify라든지 babelify라든지하고 html로 읽어내면 ok입니다.
지금은 action을 개별적으로 만들고 있습니다만 actions.js 같은 곳에서 읽어 주거나 ​​BaseComponent를 만들어 거기에서 actions는 정의해 버리거나 좋아하는 것처럼 좋은 느낌으로 해 주세요.

이상.