web-dev-qa-db-ja.com

Redux Alternative

私は最近、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" }
})

これにより、多くの分離が可能になり、この種のイベントで状態を簡単に渡すことができます。このアプローチの欠点は何ですか？

javascripteventsreactjsredux
18
jcuenod

あなたは試すべきです mobX

mobX は decorators を利用し、不要なコードの削除に成功した状態管理ライブラリです。たとえば、mobxにはreducersの概念はありません。

お役に立てれば！

6
Pranesh Ravi

フックに基づくReactnがあります。
Reduxと比較すると、桁違いに使いやすいです。 https://www.npmjs.com/package/reactn を確認し、 Stoverのブログ を参照してください。

2
Juan Lanus

Reduxのすべての利点を活用したい場合は、Reduxを使用してください。

Reactコンポーネント間で変数の同期を維持するだけの場合は、Duixを使用します。

私はDuixの作成者です。使って1年、ついに数時間前にリリースしました。ドキュメントを確認してください： https://www.npmjs.com/package/duix

2
Broda Noel

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

Reduxを使用したい場合は、 redux-auto のようなものを見てください。

Redux-auto：Reduxを簡単に（プラグアンドプレイ方式で）

ストアとアクションの設定における定型コードの削除。どうして？このユーティリティを使用すると、ほんのわずかな時間でRuduxを起動して実行できます。

あなたは今見ることができます redux-auto：helloworldプロジェクト

1
codemeasandwich

別の控えめなマルチストアの代替案は react-scopes です

ここにいくつかの機能があります：

  • シンプルなデコレータ構文、
  • コンポーネントに独立したストアロジックを直接定義できるようにする
  • コンポーネントツリーを通じてストアを簡単に接続
  • 複雑な/非同期のデータプロセスのテンプレート化を許可する
  • 非同期データを使用したSSR
  • 等
0
Nathan Braun

EventPropagatorを使用すると、通信の問題は解決されますが、データの整合性は処理されません。たとえば、同じイベントをリッスンしているコンポーネントが3つ以上あり、そのイベントのペイロードを使用して独自の状態を更新する場合などです。同じイベントをリッスンするコンポーネントが多いほど、それらのコンポーネントすべてが独自の状態で同じデータを持っていることを確認するのが複雑になります。

次に、Flux/Reduxは一方向のデータフローを提供します。単純な例は、約2つのコンポーネントAとBであり、外部ソース（APIまたはストレージ）から同じデータXを消費します。ユーザーはどちらかと対話して最新のXデータを取得できます。ここで、ユーザーがBにXの更新を要求した場合、EventPropagatorには2つのソリューションがあります。

  1. BはX自体を更新し、更新をAに通知するイベントを起動して、Aを再レンダリングします。ユーザーがAにXの更新を要求した場合も同様です。これは双方向のデータフローです。
  2. BはAにXの更新を要求するイベントを起動し、Aがイベントを起動して更新されたXを取得するのを待ちます。ユーザーがAに更新を要求すると、Aがそれを実行し、B。これは単方向のデータフローです。

コンポーネントの数が多くなり、通信がAとBの間だけに制限されなくなったら、アプリのロジックが乱れるのを避けるために、上記の2つのソリューションの1つだけを使用する必要があります。 Flux/Reduxは2番目を選択し、それで満足しています。

データコントロールに別のライブラリが必要だと本当に思わない場合は、 Reactの最新機能：コンテキスト を確認してください。これは、データコントロールライブラリが持つことができる最も重要な機能を提供し、Reactのみです。使用するには、プロジェクトのReactバージョンを16.3に更新する必要があることに注意してください。この機能。

0
blaz

RxJSでの状態管理については JetState をご覧ください。私はこれを自分のAngularプロジェクト用に作成し、後でReactのフックで使用するように適合させました。

0
Mikhail Nasyrov

Reducs と書きました。たった25行のコードであり、ボイラープレートは必要ありません。そして、25行のコードだけだと言ったでしょうか。私はそれを大きなプロジェクトに使用していて、それは非常にうまくいっています。 lit-htmlとReducsを使用する実際の例 があります。

0
Merc

私は同様の問題に直面し、多くのスイッチ、ケースなどがありました...私は自分のために代替として何かを作成します、あなたは見ることができます： https://www.npmjs.com/package/micro-reducers

0
Jovan Tomasevic

https://github.com/deepakpatil84/pure-data 注：私はこれの作成者です

0
Deepak Patil

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

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

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

  1. サーバーからプルされた元のデータ
  2. 変換されたデータ（元のデータから変換）
  3. データを保存します。 UIがバインドされているモデルとして機能するもの

3つの状態間のデータの移動を処理し、変換を処理するJavaScriptライブラリを作成する場合、イベントシステムを使用して、コンポーネントがリッスンして自己再表示できる「変更されたストア」イベントを起動できます。

0
PrimeLens