「React.js&Next.js超入門」のToDoアプリを関数型にアレンジ

はじめに

React.js&Next.js超入門で作るToDoアプリに関してまとめます。

✅ゴール
・React/Reduxの理解を深める

✅参考教材
📚React.js&Next.js超入門

ToDoアプリ制作概要

✅フォルダ構成

📁src
└index.js
└App.js
└📁memo
└AddForm.js
└DelForm.js
└FindForm.js
└Item.js
└Memo.js
└Store.js

index.jsがベース。ストアを読み込んで、Appコンポーネントを表示。

プロバイダー内に用意されたAppコンポーネントで、Memo、AddForm、FindForm、DelFormコンポーネントを組み込んで表示。

Store.jsでデータ本体とデータの操作に必要な処理を付け足し。

Memoコンポーネントはアプリの本体となる部分。検索機能実装のためinitData.modeによる表示の分岐をしている。

Itemコンポーネントはメモの項目となる部分。コネクトでステートの値は取得せず、親コンポーネントであるMemoより値をpropsで取得(stateではないので基本的に値の変更を行わない)。

AddFormはメモ作成、DelFormで削除、FindFormで検索部分を作成。

※基本的にファイル名=コンポーネント名になっている。

🙄Itemコンポーネントでstateではなくpropsで値を取得しているのが印象的だった。

✅詳細

・Store.jsの構成

ステート　initData(data,message,mode,fdata)
レデューサー　memoReducer
レデュースアクション　addReduce findReduce deleteReduce
アクションクリエーター　addMemo findMemo deleteMemo

レデューサーの関数はタイプごとの分岐を行うだけで、具体的な処理は関数(レデュースアクション)として用意。
また、アクションクリエーターという、ディスパッチ時の引数として渡す関数(アクション)を用意。ディスパッチの呼び出しの記述が簡単になる。

✅その他

String.prototype.slice()　配列のコピーを生成

関数コンポーネント化

鬼門なのはAddForm,DelForm,FindFormでstateを持っているコンポーネント。

リポジトリ

Reduxは活用しつつ、useStateフックを活用して導入してみました。

🙄useReducerを使えばStoreもいらなくなりそう。この程度のアプリなら本当にReduxは不要説。もはや好み？？

※Deleteで順番を変えて削除していくと全て削除されない挙動が見つかったので別途修正します。

おわりに

リポジトリ

今更だけどコンポーネントは親側で組み込んで表示していると考えるのが頭の整理もできて大事だなと思った。

また関数型にしてみようと試したところ、AddFormコンポーネントのsetStateで躓いたのでフックの勉強をしていきたいと思いました。

⇒フックの勉強をしたらなんとなく理解できたので追記しました。

React Hooksを使ってみた