【エクササイズ】ReduxでTodo管理できるツールを作る

課題
  • Reduxの知識の再確認
  • Reducers, Actions, Storeの単体テストを作成する
  • Reducers, Actions, Storeを連携した結合テストを作成する
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_exercise_for_redux_1

課題解決するために参考になる資料

Reduxとは【ReactとReduxの役割の比較】

あわせて読みたい
Reduxとは【ReactとReduxの役割の比較】今回からReduxの解説をしていきます。誤解をおそれずにReduxをひと言で説明すると「アプリケーション全体のデータ保管庫」になります。スライド内ではReactだけを使った時と、ReactとReduxを併用したときのイメージ図を用意しました。まずは、Reduxの役割のイメージを掴んでいただければと思います^^...

ReduxとReactのデータの流れを図を使って理解する

あわせて読みたい
ReduxとReactのデータの流れを図を使って理解するReduxを正しく使えるようになるためには、Redux内のデータのやりとりの流れをイメージできるようになることが大切です。Reduxのデータの流れがわかれば、ReactとReduxを連携したときのデータの流れの理解も難しくありません^^...

【Redux】Actionsとは

あわせて読みたい
【Redux】Actionsとは今回はReduxの概念の1つである「Actions」の概要について解説します。「Actions」はStoreに保持されているStateの値を更新する際に使われるJavaScriptオブジェクトになります。...

【Redux】Actionsのテストの書き方を覚える

あわせて読みたい
【Redux】Actionsのテストの書き方を覚える今回はReduxのActionsのテストの書き方を解説します。基本的なテストの書き方はJavaScriptバックエンド編で学習した「テストコード入門」で学習した知識をそのまま流用できます。今回はテストフレームワークに「Jest」、そして「Babel」の導入を行いました。...

【Redux】Reducersとは

あわせて読みたい
【Redux】Reducersとは今回はReduxの「Reducers」の解説をします。Reducersは関数です。引数に「State」「Action」の2つの値を受け取ります。Reducerの役割は、引数で受け取ったActionのtype値を元に条件分岐を行い、新しいStateを作成することです。...

【Redux】Reducersのテストの書き方を覚える

あわせて読みたい
【Redux】Reducersのテストの書き方を覚える今回はReduxのReducersのテストの書き方を解説します。Reducersのテストは、結局のところ関数のテストなので、関数の戻り値が意図したものであることを確認できれば良いだけです。...

【Redux】Storeとは(ActionとReducerの連携含む)

あわせて読みたい
【Redux】Storeとは(ActionとReducerの連携含む)今回はReduxの「Store」についての解説です。Storeはデータの管理や更新の役割を持ちます。これまで学習してきた「Actions」「Reducers」と連携するので、「Redux」の中でも肝となる部分になります。...

【Redux】Storeのテストの書き方を覚える

あわせて読みたい
【Redux】Storeのテストの書き方を覚える今回はReduxのStoreのテストの書き方を解説します。Reduxのドキュメントにはテストの書き方に関する項目があるのですが、その中にはStoreに関するテストの項目は存在しません。しかし、StoreのStateの初期値をテストすることには意味があると思うので、今回はStoreのState初期値のテストを書きました。...

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る