RefluxとReactファミリーバケツのいくつかの考え

3449 ワード

Refluxはどうやって遊びますか?
Refluxのactionは、asyncのサーバへのデータ処理、特にデータのアンインストールを全権で担当する必要があります.
Refluxのstoreは最低3種類に分けるべきです.

最も基本的なデータ型

少量:broadcastブロードキャスト型

チャネル:tunnel型

一、データ型は基本データである:
storeは、ユーザの基本情報のような論理的にユーザに関係するデータを格納するために使用され、データを格納するstoreは、mixinsを参照するようにreactコンポーネントに導入される際にrefux.connectメソッドを使用する必要がある.reactコンポーネントの初期化時にstoreのgetInitialStateとreactコンポーネントのgetInitialStateメソッドが呼び出され、reactコンポーネントのstateにデータが提供されます.注意、この場所のコンポーネントはstoreのgetInitialStateを呼び出しますが、storeはすでにメモリに存在している可能性があります.この場合、storeにデータがある場合(例えば、ユーザー情報がサーバから取得されている場合)、サーバから取得するのではなく、storeのgetInitialStateから直接戻る必要があります.したがって、便利なreactコンポーネントがデータ型storeをドッキングするときのコードは、store:

/*    store        ： */
/* 1.    (init)        */
/* 2.  react            getInitialState，       （   ） */
/* 3.      this.data.pristine   ，      getInitialState  react  ，           */
/* P.S.               component             */
const SomeDataStore = Reflux.createStore({
  /*      react    ，       ， store            */
  getInitialState: function() {
    if(this.pristine) { //     action，         ，      ，        
      SomeDataAction.getSomeData() //       async bug，         action  ，                    bug
    }
    // getInitialState react             ，         
    //          store        （     ）
    return this.data
  },
  /* init  store        */
  init: function() { //    Store      ，            
    this.pristine = true //            store             
    this.data = {
      userName: ‘unknown’,
      userId: -1,
    },
  },
  //      ，   this.pristine = false
})

react component:

/*    ，  store    smart component (container) */
const SomeComponent = React.reactClass({
  mixins: [ Reflux.connect(SomeDataStore, ’someData') ], //   mixins  SomeDataStore       this.state.someData 
  getInitialState: function() {
    //       getInitialState              ，     store  getInitialState    
    return { uiData: ‘    !' }
  },
})

二、少量broadcast放送型store:
例えば、httpエラーがたくさんあって、うんざりしていて、データと混同させたくないので、この考えがあります.すべてのhttpエラーはstoreにキャプチャさせ、キャプチャ後triggerが外に出るときにtypeフィールドを掛け、どのコンポーネントがエラーを報告したいのか、傍受します(はい、これはasyncです.発起されたcomponentはまずReflux.listentoに着きます).このstoreのデータは、typeでフィルタリングしてユーザーにエラーを報告します.(だからhttpリクエストをトリガーしたことを知っていても、ユーザーに報告するつもりはないなら、このstoreを完全に傍受しなくてもいいです)

const SOME_TYPE = 'some_type'

// maybe NotificationStore?
var NotifyStore = Reflux.createStore({
  init: function() {
    this.listenTo(Action.fetch.success, this.triggerWrapper(SOME_TYPE, true))
    this.listenTo(Action.fetch.error, this.triggerWrapper(SOME_TYPE, false))
  },
  triggerWrapper: function(source, success) {
    return function(resp) {
      this.trigger({
        source: source,
        success: success && resp.Success,
        code: resp.ErrorCode,
        msg: resp.ErrorMsg, // TODO:    “ ”   200 http response
      })
    }
  },
})

三、チャネル型store:
このstoreタイプは私は実際にはまだ使ったことがありませんが、同僚がページをめくるリストを書いているのを見たときに見ました.このようなデータはデータ型のstoreに保存する必要はありません.それらは1つのインタフェースに意味があり、一度取得すると捨てられ、保存する必要はありません.どうしようかな?RefluxとReduxの最大の違いもここにあるかもしれません:Reduxでは、すべてのstateをstoreに存在させたいと思っています.コンポーネントは1つのrenderメソッドで書かれていますが、Refluxには論理的なデータしか保存されていません.コンポーネントの「小さな状態」は基本的にコンポーネントの内部にカプセル化されています.この部分の「1つのインタフェースにのみ意味がある」データはまさにこのようなものです.「小さな状態」です.だからこのとき、httpリクエストはすべてactionに習慣的にカプセル化されているので、tunnelクラスのstoreを作って、actionのasyncからデータが来て、storeを介してreactコンポーネントに手渡し、保存しない(保存する必要はない)のでtunnel(トンネル/チャネル)と呼ばれます.

DSL構文解析器ジェネレータ:dropincc.java

HTMLフォームの基本的な使用