Redux入門¶

• Redux https://redux.js.org
• Flux https://github.com/facebook/flux
• infoQ Flux記事 https://www.infoq.com/jp/news/2014/05/facebook-mvc-flux/
• Redux GitHubにあるExamples https://github.com/reduxjs/redux/tree/master/examples
  • とても参考になります Cart Example など

Redux動き¶

Qiita 記事

反 Redux¶

• You Might Not Need Redux https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
  • 日本語訳https://mae.chab.in/archives/2937
• Redux Alternatives | Top 4 Redux Alternatives With Comparison https://www.educba.com/redux-alternatives/

演習ヒント¶

Install¶

npm install redux react-redux redux-logger

Container化するコンポーネント¶

• 必須
  • ReactBookStore
• 候補
  • CartDialogContainer , BookListContainer ,CartListContainer

初期データの設定¶

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

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

Reducer¶

• Reducer では既存のstateを変更してはいけません(imutable)。しかし JavaScriptの配列やオブジェクトのメソッドには配列やオブジェクトを変更してしまうメソッドが多くあります( 例　array.push(item) )
  • スプレッド構文( ...array ) を使うと配列やオブジェクトのimutableな操作ができます

配列への要素追加   let newCart = [...state.cart, {book: action.book, quantity: 1}]
配列の要素削除     let newCart = state.cart.filter((_, ix) => ix !== action.cartIndex)
配列の要素変更   　let newCart = state.cart.map((item, ix) =>　ix == action.cartIndex ? {...item, quantity: item.quantity + 1} : item) 

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

まとめ¶

• Reduxのメリット
  • 状態の管理、イベントを扱うコードの書き方が統一出来て、メンテナンス性が上がる
  • ネストしたコンポーネント間でpropsをバケツリレーしなくて良くなる
• Reduxのデメリット
  • 凡庸なコードが増える
  • シンプルなアプリではかえってメンテナンス性が下がる
  • 最近のReactの機能 Context , Hooks を利用するとReduxのメリットが感じられない