2016-10-03 5 views
0

私はReduxとredux-formを正しく使用する方法を理解しようとしているのは何日か何週間か(記事を読む、ビデオを見る/会話する)ですが、概念を完全に理解することは本当に難しいです。多分、私のユースケースはReduxにはあまり適していないかもしれません。redux-form(またはRedux一般)を作成するには、ローカルデータベースでうまく動作しますか?

私が見つけようとしているのは、大規模なアプリケーションのための良い基礎です。私はReactについてかなり確信していますが、Redux(そして結果的に還元型)は、私が持っていない問題の良い解決策のようです。それでも皆はRedux(またはフラックス)のコンセプトを賞賛しています。だから私は何かを逃していないことを確かめたいと思います。

まあ、アプリケーションが(それはオフライン最初のアプリケーションです)ブラウザで容易に入手可能で重くデータベース駆動型を持つすべてのデータです。

私はNeDBプラスODM様Mongooseと非常によく似てブラウザ内のデータベースを使用していますが、実際のデータベースは、私はオープンソースのために、それは(十分に安定しているいったんたい(Notherの)カスタムプロジェクトです私はに既にが実装されており、これまでは非常にうまく動作しています)。私は購読することができることを意味 -

そのデータベースのキーポイント(この質問に関連する)は、ブラウザで容易に入手可能ですべてデータを持っており、それが「ライブクエリを」サポートしていることを、おそらくですとデータベースの変更と最新のクエリ結果は、消費するコンポーネント/ハンドラに直接プッシュされます。さらに、データベースはすべてのデータをバックグラウンド(双方向)のサーバと同期させます。つまり、コレクションによってコンテンツがいつでも変更される可能性があります。私はMaterial UIを使用しているUIのフロントエンドとして

アプリケーション自体は非常に多くの異なるコレクションを管理するため、特定のコレクション内の単一のドキュメントを編集できるように、ユーザー用のフォームを実装する必要があります。アプリケーションのコンテキストに応じて、現在のコレクション内のすべてのドキュメントのリストが表示され、そのリスト内の現在選択されているドキュメントの詳細を示すフォームが表示されます。そのフォームはもちろん、文書の変更も許可します。ユーザーはおそらく一度に1つのコレクション/フォームのみを編集(参照)します。

理解を容易にするためにこのクイックMockupを参照してください: UI sketch

リストに左側には反応し、前述のライブクエリを行うのは途方もなく簡単です。また、データベースと常に同期しているという点で「反応的」です。ただし、現在Reduxはまったく使用していません。それが悪いのかどうかは分かりません。

このリストの項目をクリックすると、詳細が右側のフォームに表示されます。

私はredux-form(v6)のコンセプトが好きですが、ドキュメントデータをフォームにフィードする方法を理解できません。私はinitialValuesがあることを知っていますが、正しく使用する方法を理解できませんでした。

文書のデータを何とかReduxにプッシュしてフォームに反映させる必要があると思います。データをストアにプッシュするためにReduxアクションを「開始」する必要がありますか?

一方、古典的なReact の状態を使用すると、リストから自分のフォームコンポーネントにドキュメント(単純なJSオブジェクト)を渡すことが非常に簡単です。 現時点で私はReduxストアにグローバルフォーム状態を持つことによるメリットはありません。しかし、おそらく私はredux形式以外の何かを必要とするでしょう(比較可能なものは見つかりませんでした)。

私のデータベースとのReduxは、最終的に両方ともグローバルデータストアであるため、私にとっても重複しているようです。

私は、アプリケーションのステータスインジケータのように、データベースと内容を行うには、グローバルなdrawerを切り替えるには何もない一握りの状態のため、既に使用Reduxのを行う。私もredux-routerを使用しています(そして、は最終的に現在のリスト選択に一意のURIをリンクしたいと思います)。しかし、私はReduxとデータベース/データベース関連のコンポーネントとの間に調和のとれたリンクを見つけるのに苦労しています。

私の最終的な質問は、アプリケーションのこれらの部分を実装するための合理的な方法は何ですか? ReduxかどうかRedux?どちらの場合でも、どのように実装できますか?

答えて

0

すべてのデータがローカルで多かれ少なかれ同期的に使用できる場合、Reduxはアプリケーションにあまり適していない可能性があります。

ただし、多くのフォーム状態管理を提供するReduxフォームを使用する場合は、Reduxフォーム・レデューサー用にのみ使用する場合でも、Reduxを使用する必要があります。

フォームを初期化するには、initialValues小道具を使用して装飾されたフォームコンポーネントに値を渡すか、dispatch(initialize(formName, formValues))に電話することもできます。

+0

私は前に 'initialValues'を試しましたが失敗しました。私はあまりにも多くの学習の後、私は "木の木を見ることができなかった"と思って、いくつかばかな間違いをしました。とにかく、私はもう一度やりました。それは魅力のように機能します。驚くばかり! :-) –