reduxを使うとかなり便利なわけで。
ただサンプルだとか色々と公開されているのはactionが複数とかあまり考慮されていないものが多く。
そうなるとactionが複数の場合はどうすればいいんだとなったりするよね的な。
とりあえずはcontainerでactionを個別にimportしてdispatchをする手法が一つ。
次にそもそもcontainerでconnectする際にmapDispathToPropsを記述しないとthis.dispatchが渡されるので、
componentでactionを個別にimportしてdispatch(hoge())みたいにやる方法がある。
どっちもactionを編集したら、containerなりcomponentなりにimportを反映させないといけないから面倒なわけで。
かといってreducerみたいにやろうにも、bindActionCreators()はobjectを再帰的にみるわけではないという。
ということで今日はとりあえず面倒なactionsをそもそも最終的に一つにまとめちゃおう的なお話をば。
. ├── README.md ├── dist │ ├── assets │ │ ├── css │ │ └── img │ ├── bundle.js │ ├── index.html │ └── styles.css ├── package.json ├── server ├── src │ ├── actions │ │ ├── didmount.js │ │ ├── index.js │ │ ├── meta.js │ │ └── session.js │ ├── client.js │ ├── components │ │ ├── app.js │ │ ├── footer │ │ │ ├── footer.js │ │ │ └── index.js │ │ ├── header │ │ │ ├── header.js │ │ │ └── index.js │ │ ├── home │ │ │ ├── home.js │ │ │ └── index.js │ ├── containers │ │ ├── app.js │ │ ├── home.js │ │ ├── index.js │ ├── reducers │ │ ├── didmount.js │ │ ├── index.js │ │ ├── meta.js │ │ └── session.js │ ├── routes.js │ ├── server.js │ ├── store.js │ └── styles │ ├── app.scss └── webpack
とりあえず諸々省略もあるんだけれども、今回は下記のような構成。
・サーバサイドレンダリング
・buildするとdistにbundle.jsとstyles.cssが生成される
サーバサイドレンダリングについてはこちらの記事を。
ディレクトリ構成についてはこちらの記事を。
とりあえずはこんな感じ。
■actions/index.js
actions/index.jsでbindActionCreatorsをしておくっていう。
ちなみにexport default dispatch => ({})としているけども、非同期なときにはこのdispatchをaction内で呼び出さないといけないので必要になる。
これによってactionを一つのファイルで全てにアタッチすることができる感じになる。
■containers/app.js
mapDispatchToPropsを定義する際に、importしたactionsにdispatchをつけて実行してあげればよい。
なのでどのcontainerに対してもmapDispatchToPropsはこの記述になるので、actions/index.jsの内容のみが反映される。
それにdispatchも渡すことができる。
ちなみにそもそもactions/index.jsでmapDispatchToPropsを生成して、
それをそのままconnectに入れればよいと思うんだけれども、
あえてそれをやっていないのは、そのcontainer内でだけ使いたいactionなりがある場合に柔軟的にできるようにという感じで。
大規模になればなるほど、actionに一つ関数を加えてそれが多岐に渡るとかいう場合に反映させるファイルが多くなるわけで。
まぁそんな設計にしなければいいんだけど。
けどそもそもファイルを一つにまとめられないと管理が大変になるし、importしてないやとかあるわけで。
とりあえず今回のは面倒くさがりな人には向いているであろうactionの管理の仕方というお話的なみたいな。
0 件のコメント:
コメントを投稿