Help us understand the problem. What is going on with this article?

React0.13における各flux軍団の対応考察メモ

More than 3 years have passed since last update.

React0.13になってから触ってみたらいくらかflux事情も変わっていたので調べた話

React 0.13で何が変わったのか?

fluxに絡むところでいうとこのへんがでかい。

やっぱり0.13からはclass使いたい!

今までのfluxライブラリは今まで概ねmixinを使うことでviewとstoreを紐付けてきた。

じゃあこれからどうすんの???

各flux達の対応具合

flummox

個人的には今後はこれを使っていこうかなと思っているのがflummox。

2015/07/23追記:flummoxは4.0で更新止めるからこれからはreduxを使ってね!だそうだ・・

fluxxorと名前似ててややこしい。

Why flux component is better than flux mixinという記事があるので詳しくはこちら。

具体的にはざっくりこんな感じ

class Container extends React.Component{
  render(){
    //一個storeとつなぐ親コンポーネントがラップする
    return (
      <FluxComponent flux={this.flux} connectToStores={{
        messages: store => ({
          foo: store.getFoo(),
          baz: store.getBaz()
        })
      }}>
        <InnderCompoent />
      </FluxComponent>
    )
  }
}

class InnderCompoent extends React.Component{
  render(){
    // 取り出したstoreはpropとして子に伝播
    const { foo, baz } = this.props
    return (
      <div>
      </div>
    )
  }
}

概要で言うと、FluxComponentというElementを外側に配置し、それがStoreからデータを呼び出しpropsとして子要素に流してくれる。
結構このパターン多い。みたい。

余談だがflummoxにおいてstoreのサンプルではasync/awaitを利用していた。ナウい。

Alt

だいたいflummoxと同様な対応っぽいので省略
http://alt.js.org/docs/components/altContainer/
Altは先鋭的ではあったけど若干複雑さを感じて断念

Marty

以前自分でこんな紹介記事を書いてみたりしていたくせにというのがありつつ、今回のReact0.13の対応の話だと若干微妙かもなあというのがMarty。
どことなく場当たりな雰囲気を感じざる負えない。

class User extends React.Component {
  render() {
    return <div className="User">{this.props.user}</div>;
  }
}

// createContainerで今までと似たような記法をする
module.exports = Marty.createContainer(User, {
  listenTo: UserStore,
  fetch: {
    user() {
      return UserStore.for(this).getUser(this.props.id);
    }
  },
  failed(errors) {
    return <div className="User User-failedToLoad">{errors}</div>;
  },
  pending() {
    return this.done({
      user: {}
    });
  }
});

結構やっていることが今までのmixinっぽさなのだが、結局ES6っぽくなくてうーんな感じ。

未対応っぽいFlux達

あまりちゃんとは追ってないけどこのあたりの初期からある者達対応追いつけてない感じがある。
issueやRoadmapまでは未確認。

結論

もうflummoxでいいんじゃないかな

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした