前のパートに戻る 完了して次のパートへ  

  1-1 TypeScript&hooks での Redux の扱いを学ぼう

このパートでは、TypeScript と hooks を用いてどのように Redux を記述していくのかについて学びます。

本パートの目標物


このパートは説明だけのため成果物はありません。

このパートでの学習内容


  1. Redux with TypeScript
  2. Redux with hooks

TypeScript と hooks を Redux とどのように組み合わせて開発していくのかをそれぞれ説明していきます。

1. Redux with TypeScript


いきなりですが、redux を TypeScript で記述するのはとても大変です。とくに reducer のところの型情報の扱いが非常に複雑です。フルスクラッチで実装してみるととてもいい勉強になると思いますが、挫折しかねません。

以下に Reducer が難しい一例を示します。いきなりがっつり TypeScript のコードが出てくるのでわからない人は飛ばしていただいて結構です。

このようにアクションタイプによって渡される payload は異なるのですが、それをswitch caseでうまく扱うことは難しいです。

では、どうするのでしょう。typescript-fsaというライブラリを用いることでこの問題を解決できます。Redux with TypeScript の開発ではデファクトとなっているので、この教材でも採用しました。

typescript-fsaを用いることでかなりスッキリかつ型安全にコードを記述していくことができます。(詳細については本章では説明しないので教材の次の章以降または github でご確認ください。)

2. Redux with hooks


これまで Redux を React で用いるときはreact-reduxconnect()で接続するのがデファクトでした。しかし、このconnect()は非常に厄介でなかなかしっかりと理解することができません。

しかし、React の hooks API の登場とともにreact-reduxも hooks に対応して一気に使いやすくなりました。徐々に導入を始めている現場も多いと思うのでこの教材でも採用することにします。

このように状態を参照したいところでuseSelectorを使うことで store から状態を参照することができるようになります。

詳細は教材の中で紹介しますが、dispatchも以下のようにすぐに使えるようになって便利です。

参考) Hooks

このパートでは、TypeScript と hooks を用いてどのように Redux を記述していくのかについて学んできました。説明ばかりであまり理解が進んでいないと思うので次の章から実際に実装して理解を深めていきましょう!

議論

0 質問

このコースの評価は?