Reduxの代替

Question

私は最近、Reactの学習を始めました。私はすぐに、機能と状態がいっぱいになっている膨れた親コンポーネントの問題に遭遇しました。最初はFluxを見て、Reduxを見ましたが、どちらも本当に圧倒的なソリューションのようでした。

このような何かが行われていない理由を私は疑問に思って：

//EventPropagator.js 
let EventPropagator = { 
    registerListener(listenerObject){ 
     if (this.listeners == null) 
      this.listeners = [] 
     this.listeners.push(listenerObject) 
    }, 
    fireEvent(eventObject){ 
     let listenerList = this.listeners.filter(function(listener){ 
      return listener.eventType === eventObject.eventType 
     }) 
     listenerList.forEach((listener) => { 
      listener.callback(eventObject.payload) 
     }) 
    } 
} 
export default EventPropagator 

を使用するには：コンポーネント単にregisterListenerとfireEvent：

//main.js 
import EventPropagator from './events/EventPropagator' 

EventPropagator.registerListener({ 
    "eventType": "carry_coconut", 
    "callback": (payload) => { 
     // actually carry coconut 
     this.setState({"swallow_type": payload.swallow}) 
     console.log(payload) 
    } 
}) 
EventPropagator.fireEvent({ 
    "eventType": "carry_coconut", 
    "payload": { "swallow": "african" } 
}) 

これはデカップリングと国家の多くは可能性ができるようになりますこの種のイベントで簡単に回ることができます。このアプローチの短所は何ですか？

Answer 1

あなたはmobX

mobXがdecoratorsを利用した、不要なコードを削除することに成功し、状態管理ライブラリで試してみてください。たとえば、mobxにはreducersという概念はありません。

希望すると便利です。

Answer 2

イベント駆動型システムが必要なのは、子コンポーネントが兄弟と話すことができますが、イベントペイロードとしてデータを渡す必要はありません。それは複数の開発者が取り組んでいるプロジェクトのためのガバナンスと悪夢のシステムにつながるでしょう。

フラックスのようなアーキテクチャパターン（google it）に従う限り、実際には、イベントシステムとともにデータを保持するために、javascriptオブジェクトとJavascriptオブジェクトでこれを正常に実行できます。

データは3つの異なる状態の1つとして扱う必要があります。それはどちらかだ

1. 元のデータは、サーバから（元から変換）
2. 変換されたデータ
3. ストアデータを引っ張りました。 UIがバインドされているモデルとして機能するもの

3つの状態間のデータの移動を処理して変換を処理する場合は、イベントシステムを使用して「ストアコンポーネントがリッスンして自己再レンダリングできる「変更済み」イベントです。

Answer 3

ReduxはReactの宣言的プログラミングスタイルの続きです。アプリケーションロジックをコンポーネントにマッピングする簡単な方法は、Backbone.React.Componentのようなものを使用することですが、reduxを使用すると、すべてのツール&ミドルウェアを使用できるようになります。また、あなたのアプリケーションに無期限の遷移を持たせると、デバッグがずっと楽になります。とにかく、私はあなたがワイヤリングの多くを必要とすることに同意します。&ボイラープレートはとにかく取得します。あなたはReduxのを使用したい場合は、あなたが

redux-auto

Reduxの、自動のようなものを見て可能性：設定に定型的なコードを削除Reduxのは、簡単に（プラグをして遊ぶのアプローチ）

ストア&アクション。どうして？このユーティリティを使用すると、Ruduxを短時間で立ち上げることができます！

あなたは今redux-auto: helloworld project