ReactでTodoアプリを作ろう2!

前回は、Todoアプリケーションの追加、削除機能を実装しました。

コンテクストの導入

Reactのように状態管理を活用するフレームワークには、prop drilling問題がついてまわります。

共有したデータを子Componentに渡していくことで、開発規模が大きくなるにつれ、状態管理が難しくなっていく問題です。

従来は、reduxを使って、コンポーネント間で状態の管理を行なっていましたが、Reactのコンテクストを利用することで、reduxを使わなくても状態管理がしやすくなりました。

このファイルにコンテクストオブジェクトを作成する実装を追加します。

今後は、このコンテクストを子コンポーネントに渡すことで状態管理を行います。

このコンテクストを使うには、Providerを作成する必要があります。

コンテクストを渡してあげたいコンポーネントを「AppContext.Provider」で囲みます。

続いて、子コンポーネントを以下のように修正します。

これで、stateとdispatchをコンポーネントに渡さなくても、コンテクストを通して値を受け渡しできるようになりました!

Reduxの導入

コンテクストを使うと状態管理は楽になりますが、Reduxを導入してもっと楽をしましょう。

reduxを使って、reducerを書き換えてみましょう。

コンポーネントの書き換え

これまでは、array([])でstateを管理してましたが、オブジェクトに変更しました。

オブジェクトに変更したので、「state.todos.length」に変更しました。

こちらも「state.map」 -> 「state.todos.map」に変更しました。

reducerの書き換え

このファイルにreducers/index.jsに記載していた内容を移します。

reduxを使うには、combineReducersを利用すればよさそうです。

次のコマンドでアプリを動かして、問題なく動作するか確認してみましょう。

更新履歴のreducer

更新履歴を付けてみましょう。

まずは、reducerを用意します。

それぞれの意味についは、今までの実装してきた内容とほぼ同じであるため、割愛させていただきます。

時間ユーティリティ

以下のファイルを作成してください。

これは、時間を取得するユーティリティです。

履歴時間に使います。

履歴の作成

では、履歴を作成しましょう。

予定追加、削除イベントにdispatchを設定し、履歴更新を行っています。

履歴の削除

履歴の削除も追加しましょう。

履歴の表示

履歴の表示エリアを作成しましょう。

この辺りも今まで実装してきた内容とほぼ同じであるため、説明は割愛させていただきます。

では、画面を確認してみましょう。

ローカルストレージへの保存

最後は、定番のローカルストレージへのデータ保存で締めようと思います。

今回は、useEffectも使います。

stateに変化があったときに、コールバックしてくれる便利なメソッドです。

これで画面を更新しても、データが消えなくなりました。

おわりに

いかがだったでしょうか。

もしかしたら「あれ?更新は?」と思われたかもしれません。

更新については、あえて実装していません。

これは皆さんに実装してもらおうと「わざと」残しているのです。

決して、めんどくさくなったとかではありませんから!

是非、更新処理を追加してみてください。

それでは、また!

コメントを残す