【課題あり】Redux Toolkit のチュートリアルでイメージを掴む
この章では Redux Toolkit の公式ドキュメントにある「Quick Start」を元に Counter アプリを作っていきます。
「TypeScript Quick Start」というページも用意されていますが、こちらは「Quick Start」で実装したものを TypeScript で書いた場合のポイントがまとめられているページとなります。
そのため、メインは「Quick Start」を読みながらコードを書いていき、型定義まわりでうまく動かないなどあれば、適宜「TypeScript Quick Start」の方も参考にすると良いかと思います。
TypeScript が動く環境を作る
今回は、1 日目の「速習 React × TypeScript」の「Vite を使ってプロジェクトを作る」と同じ流れで React × TypeScript の開発環境を用意していきましょう。
Vite で開発環境を作る流れを忘れてしまった場合、「速習 React × TypeScript」の動画を参考にするか、Vite の公式ドキュメントの「最初の Vite プロジェクトを生成する」を参考にしていただけたらと思います。
Redux Toolkit の Quick Start に取り組む
ここから先は、先ほども紹介した Redux Toolkit の公式ドキュメントの以下の 2 つを元に、実際にコードを書いて動かしていきましょう。
実装に行き詰まってしまった場合は Discord で質問をいただけたらと思います。
Quick Start を読んでいくと「Redux DevTools extension」というワードが出てきます。
これは Web ブラウザのデベロッパーツールで、Redux 内の動きを確認できるブラウザ拡張機能となります。
Redux のデバッグをしたいときに便利なので、Web ブラウザに追加しておくことをおすすめします。
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja
課題
今回も課題を出します。
課題内容は、「Quick Start」で実装したコードに、以下の機能を追加することです。
- Redux Toolkit の
createAsyncThunkを使って、非同期で 1 秒遅れでカウントを+1する機能を実装する
実装が全く思い浮かばない方向けに、今回も実装例をプルリクエストで用意したので、行き詰まった場合は実装例のコードを参考にしていただけたらと思います。
その他、実装の参考になるリンクを以下に貼っておきます。
- Redux Toolkit 公式ドキュメント
- Getting Started
- Learn Modern Redux Livestream の動画（18:15〜56:10 あたり）
- API Reference
- Getting Started
提出ルール
- 提出方法
- 提出期限
- 提出できなかった場合
これらのルールは 1 回目の課題の時と同じです。
ルールを忘れてしまった場合は、1 日目「【課題】簡易 Todo アプリを作る」の「課題提出」以降の文章をご確認ください。