ReduxでReducerのファイルを分割する方法


stateが多くなるとreducerのファイルが巨大化してきます。ファイルを分けた方が編集も楽になるし、コード全体の見通しもよくなると思います。

分割方法は簡単で、index.jsファイルを作り、各状態のファイルを読み込み、configureStore.jsでそのindex.jsを読み込みます。

ディレクトリツリー

configureStore.js

index.js

user.js

これで巨大reducerファイルを編集しなくて良くなる:)


ES6のimport/exportを理解する[javascript]


React Nativeをやってると暗黙の了解として、import/exportが使われてる。
requireで書いてたみたいだけど、その歴史を知らないのでrequireは気にしないでimport/exportを理解する。

下記のようにlib.jsとmain.jsがあった場合、importするファイルのlib.js内でfunctionをexportしておくと
import {} fromでそれを個々に呼ぶことができる。

またアスタリスクを使用することで、オブジェクトを参照してexportした関数が呼べる。

default

よくわからないのがexport default
セミコロンなしで呼ぶことで関数・クラスをそのまま呼べる。
読む込むファイルごとに 1 つだけ呼ぶことができる。

defaultは一つだけというのがポイントですね。