Reduxループと構造

今日は、redox内actionとデータがどのように流れているかを理解し、ミドルウェア整理サイクルを試してみましょう...!図のように.

ソースhttps://stackoverflow.com/questions/51610872/storing-to-redux-on-page-load/51611975

middleware

Actionはdispatchの後、まず複数のミドルウェアを通過し、reduceに到達する.このとき中間の関数をミドルウェアと呼ぶ.ex . redux-thunk, redux-logger

dispatch.(action) =====|middleware|=====> reducer

上記のように、dispatchを介してactionのreduceを渡すことは、userStateの値を変更したように、ステータスを変更するのではなく、全体を変更するようにstoreに格納されます.これはよく知られている方法です.{.state}と同じように...を返します!

state

どうやって状態を呼んだの?セレクタから直接インポートできます.storeのstateはセレクタによって読み込まれ、イベントに渡されるようにループするとも言える.

Redux構造

ではRedux構造はどうすればいいのでしょうか…?初期はredixだけでなく、ファイル構造の構築も面倒でした.次の図は、NAVER開発ブログで参照されているフォルダ構造です.これは、ReactおよびReduxを使用するプロジェクトで使用するために、redux-bookのフォルダ構造に基づいています.

📂 action/

Actionフォルダはアプリケーションで使用されるactionです.これはtypeやAPI通信と同様の動作方法(action creator)を収集したフォルダである.私の場合、actionのタイプを分けて、actionTypeファイルに新しいファイルを指定しました.そうなるとtypeが増えて管理が楽になります…!

📂 reducer/

主にreduceとそれらのreduceを組み合わせたindexファイルから構成されています.reduceフォルダはactionフォルダと同様に1つに作成したり、ドメイン別に分割したりできます.アクションファイルと翻訳機ファイルを組み合わせて使用するのはアヒルのテクニックと呼ばれています.通常のアヒルメソッドを使用する場合は、actionの名前に接頭辞を付けて、他のモジュールと動作名を繰り返すことを防止できます.reduceファイルの数が増えると、アヒルの技術を使うことも考えられます.

📂 store/

storeフォルダにはindexが含まれています.jsファイルは1つしかありません.主にミドルウェアを設定します.私の場合、applymiddlewareでreducx-thunkまたはloggerが設定されています.または、react-devtoolを設定してデバッグできます.
上記のようにreduxの周期と構造についていくつかまとめた.勉強するなら.構造が本当に重要で難しいことに気づきました...これから始まるプロジェクトもコミュニケーションを通じてより堅固な基礎でスタートします...!ファイルの設定についてAtomic Design Pattern...これは後で処理しましょう…!