プロジェクト

全般

プロフィール

編集 履歴

Redux » 履歴 » バージョン 1

Yuumi Yoshida, 2019-10-16 17:44

1 1 Yuumi Yoshida 
# Redux入門
2 





    3
    
    
    
* Redux https://redux.js.org





    4
    
    
    
* Flux https://github.com/facebook/flux





    5
    
    
    
* infoQ Flux記事 https://www.infoq.com/jp/news/2014/05/facebook-mvc-flux/





    6
    
    
    
* Redux GitHubにあるExamples https://github.com/reduxjs/redux/tree/master/examples





    7
    
    
    
    * とても参考になります Cart Example など





    8
    
    
    





    9
    
    
    
## Redux動き





    10
    
    
    





    11
    
    
    
[Qiita 記事](https://qiita.com/clocker/items/331f20c02cc0d01be062)





    12
    
    
    





    13
    
    
    
![](https://camo.qiitausercontent.com/0bc5198c84de1c3629eb0a5635f6530c344619b7/68747470733a2f2f63616d6f2e67697468756275736572636f6e74656e742e636f6d2f396465353237623934333263633932343464633630303837356234366234333331313931386235392f3638373437343730373333613266326637333333326536313664363137613666366536313737373332653633366636643266366436353634363936313264373032653733366336393634326536353733326637353730366336663631363437333266333333363334333833313332326636393664363136373635373332663332333433383334333733393330326634313532343334383264353236353634373537383332326436353738373436353665363436353634326437323635363136633264363436353633366336353732363137343639373636353265363736393636)





    14
    
    
    





    15
    
    
    





    16
    
    
    





    17
    
    
    
## 反 Redux





    18
    
    
    





    19
    
    
    
* You Might Not Need Redux https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367





    20
    
    
    
   * 日本語訳https://mae.chab.in/archives/2937





    21
    
    
    
* Redux Alternatives | Top 4 Redux Alternatives With Comparison  https://www.educba.com/redux-alternatives/





    22
    
    
    





    23
    
    
    





    24
    
    
    





    25
    
    
    
## 演習ヒント





    26
    
    
    





    27
    
    
    
### Install





    28
    
    
    





    29
    
    
    
```





    30
    
    
    
npm install redux react-redux redux-logger





    31
    
    
    
```





    32
    
    
    
### Container化するコンポーネント





    33
    
    
    





    34
    
    
    
* 必須





    35
    
    
    
     * ReactBookStore 





    36
    
    
    
* 候補





    37
    
    
    
     * CartDialogContainer , BookListContainer ,CartListContainer





    38
    
    
    





    39
    
    
    
### 初期データの設定





    40
    
    
    





    41
    
    
    
初期データは React版と同じく ReactBookStore クラスコンポーネントの componentDidMountメソッドで設定 ActionCreatorを呼び出すのが良いと思います。  





    42
    
    
    
バックエンドの通信でもこの方法が使えます。





    43
    
    
    





    44
    
    
    





    45
    
    
    
### Reducer





    46
    
    
    





    47
    
    
    
* Reducer では既存のstateを変更してはいけません(imutable)。しかし JavaScriptの配列やオブジェクトのメソッドには配列やオブジェクトを変更してしまうメソッドが多くあります( 例　`array.push(item)` )





    48
    
    
    
   * スプレッド構文( `...array` ) を使うと配列やオブジェクトのimutableな操作ができます





    49
    
    
    





    50
    
    
    
```





    51
    
    
    
配列への要素追加   let newCart = [...state.cart, {book: action.book, quantity: 1}]





    52
    
    
    
配列の要素削除     let newCart = state.cart.filter((_, ix) => ix !== action.cartIndex)





    53
    
    
    
配列の要素変更   　let newCart = state.cart.map((item, ix) =>　ix == action.cartIndex ? {...item, quantity: item.quantity + 1} : item) 





    54
    
    
    
```





    55
    
    
    





    56
    
    
    
* 出来たら total.js の機能をReducerに取り込んで下さい。その際にstateに小計、合計を持つように変更しても良いです





    57
    
    
    





    58
    
    
    
## まとめ





    59
    
    
    





    60
    
    
    
* Reduxのメリット





    61
    
    
    
    * 状態の管理、イベントを扱うコードの書き方が統一出来て、メンテナンス性が上がる





    62
    
    
    
   * ~~ネストしたコンポーネント間でpropsをバケツリレーしなくて良くなる~~





    63
    
    
    
* Reduxのデメリット





    64
    
    
    
   * 凡庸なコードが増える





    65
    
    
    
   * シンプルなアプリではかえってメンテナンス性が下がる





    66
    
    
    
   * 最近のReactの機能  Context , Hooks を利用するとReduxのメリットが感じられない