React/Reduxで秩序あるコードを書く

by Naoya Ishii

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. 今⽇話すこと • 秩序ある開発のために⾃分なりに気をつけていること • ここで⾔う秩序とは、複雑な要件や度重なる変更に対して柔軟に対応できる状態のこと。 • 「あっちを修正したらこっちが変になった」を避けるということ。 • 1箇所の修正によってあちこち修正しないといけない事態を避けること。

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducksの基本 • re-ducksとは • https://github.com/alexnm/re-ducks • ducksというパターンを踏襲 • https://github.com/erikras/ducks-modular-redux • OperationsとSelectorsが特徴的

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. • Ducksはファイルはスッキリするが、複雑になってくると1 ファイルが⼤きくなってくる。 • 使う側からのインターフェースを変えずにディレクトリにすることもできる。 • redux-thunkなどを使って⾮同期を扱うようになるとまたさらに複雑になる。 ducksの使いづらいところ

Slide 9

Slide 9 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks • re-ducks • 使う側からの呼び⽅はducksと同じ感じ • action, reducerはほとんど定義するだけ • selector, operationという新キャラが登場 • 1層増やすことによって、 action, reducerが本来やるべきことに集中できるようになる。

Slide 10

Slide 10 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Selector • Selectorのルール 1. (state) => return 欲しい値というインターフェース 2. Stateから算出できる値はstateに保存しないでselectorから得る（同じデータを複数のstateで持たない） 3. 別のディレクトリのselectorから値を取得しても良い 4. reselectを使う

Slide 11

Slide 11 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. Operation • Operationのルール 1. redux-thunkを使って良い 2. 値が欲しいときはselectorを経由して取得する 3. 同じディレクトリのactionは参照して良い。 4. 別のディレクトリのactionは直接参照せず、operationを経由して使う 5. A→Bの順にactionを叩くといった⼿続きを書いていい

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks • re-ducksを適切に使うことで、かなり秩序を得ることができる。 • 単にstateを操作するだけのaction/reducerと、複雑な操作を扱うoperation/selectorを明⽰的に分ける • reactらしさ・reduxらしさを損なうことなく複雑さに⽴ち向かうことができる

Slide 14

Slide 14 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks • アプリケーションの本質は「状態(state)」 • Reactの良さは状態(state)→表⽰を定義するだけで良いこと。 • 状態管理とアプリケーションの複雑さは切り離されているべきであり、operation, selectorを使うことで切り離すことができる。 • ある状態を変更するルートが複数ある場合でも混乱しなくなるってこと。 • stateと実際に表⽰上必要な値や使いやすい形はかならずしも⼀致していないので、selectorで1クッションさせて変更に柔軟にする。

Slide 15

Slide 15 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. re-ducks • アプリケーションの本質である「状態」と複雑さを持つユーザ操作や⼿続きを分けて考えることができる。 • ⼿続きの例として、「ログイン済みならコンテンツに遷移して、ログインしてないならログイン画⾯に遷移」など。「コンテンツに遷移」と「ログイン画⾯に遷移」は別々のaction(もしくはoperation)で、別々の状態を操作するはず。 • それぞれはシンプルに作っておいて、operation, selectorで分岐する条件を取得して必要なactionを順番に叩く。

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う • Componentが知りすぎた命名の例 • slottledGetHogehoge(ボタンにバインドされた関数) • スロットルされてるかは知らなくていい • Hogehogeをとってることも知らなくていい • ボタンはクリックされたら関数を呼ぶだけでよくて、何をするかは知らなくていい。 • confirmAndLogin(ボタンの名前) • ログインはいいかもだけど、その前に確認を出すことは知らなくていい • 仕様が変わった時コンポーネントも修正しないといけなくなる

Slide 22

Slide 22 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う • 知りすぎたロジック • よくあるif(xxx < 10)など。10ってなんだ。 • マジックナンバーが良くないは当然なので定数にする。 • この数字の理由が表⽰上の理由でコンポーネントにあるのか、ロジックの理由でここにあるのか考える必要がある • ロジックにあるならselectorを使って判定し、真偽値で渡す。

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う • mapStateToPropsではPropsにわたすべき値を計算することができる。 • これは実際にはselectorでやる。 • コンポーネントに無駄なpropsを渡して知りすぎたロジックによる計算をさせるべきではない。

Slide 28

Slide 28 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う • mapDispatchToPropsで予めAction(re-ducksではOperation)にどんな値を渡すかを定義しておける。 • コンポーネントでは単に引数無しで実⾏するだけにできる • mapDispatchToPropsではActionのアグリゲート（おまとめ）ができる。 • ⼀つのユーザー操作に複数の別々の処理を紐づけたい時。「遷移する &⾳を鳴らす」とか。(どんなときだｗ) ※ 先程の「ログイン済みならコンテンツに遷移して、ログインしてないならログイン画⾯に遷移」なんかは⼀連の⼿続きなのでOperationで書いておく。

Slide 29

Slide 29 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. ComponentとContainerをしっかり使う • mergePropsを使う • mapDispatchToPropsではmapStateToPropsで得た値を知ることはできない。 • stateの値もactionもコンポーネントに渡してセットで使う、をやりがち • ユーザー操作によって引数に渡す値が変わらないのなら、mergeProps で「stateの値を引数に取るoperationを叩く関数」を作ってpropsとして渡し、コンポーネントでは単に引数無しで実⾏するだけ、という形にするとコンポーネントが知りすぎなくてよい。

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Copyright (C) 2018 Yahoo Japan Corporation. All Rights Reserved. まとめ • アプリケーションは複雑であることを認めて、向き合う。 • どこが複雑になるか、どこをシンプルにするかを意識する。 • Reducer, action, operation, selector, component, containerそれぞれの責任を理解し、その範囲を超えすぎないことを気をつける。 • 開発中のエンジニアはすべてを知りすぎた状態なので、それぞれの気持ちになってコーディングする。