はじめに

Reduxの基礎的な部分から、Redux Toolkitを使った、データの管理方法を書いていきます。

Reduxの概念

簡単に言うと、Reduxはデータを一つの場所で管理すれば、どこからでも使えるから楽だよねというイメージです。
各ファイルで同じデータを使うのであれば、そのファイルごとでデータを取得するのは面倒ですし、コードの量のも増えてしまいます。

Reduxの仕組み

以下の画像は、Reduxの仕組みを図で表したものです。

Store

データの保管庫です。
データを他のファイルで使用する場合は、storeからデータを取得してきます。

Reducer

Reducerとは、アプリケーションの状態を書き換える事が唯一できるものです。 Reduxの基本設計の1つであるSingle source of truth(ソースは１つだけ)でもあるようにStateを書き換える事ができるのはこのReducerのみです。(他のサイトからパクりました)

Actions

データを操作する時のメソッドと考えればいいかなと。

Dispatcher(Dispatch)

日本語だと送るとか送付するといった意味をもちます。データを操作する時には、dipatchを使って、どのようにデータを操作するか(action)を通知する役割をします。

State

storeのデータの状態を表すものです。

View

こちらはユーザーが目にする画面の部分です。

Reduxを使うメリット

メリットは以下のようになります。
・コードの可読性が上がる。
・機能追加にも容易に対応できる。
・考え方はシンプルなので、理解すれば使いやすい。

デメリット

・学習コスト
→仕組みや概念の理解が少し難しいかも
・コード量が増えてしまうことがある。

インストール

Reduxのインストール方法について書いていきます。

ついでにReduxToolkitのインストールコマンドも書いておきます。

実践

ここからはReduxToolkitを使って、コードを書いていきます。
ReduxToolkitとは、Reduxを用いた開発を効率的に行うためのツールキットです。

Reduxと比べて、最大のメリットはコード量が減ることです。詳しくは下の構成図で説明させていただきます。他にも、可読性が上がることやTypeScriptとの相性がいいこともメリットです。

まずは、rootファイルに以下のコードを書きます。

これで、全てのファイルでデータを管理できるようになりました。

次にstoreを定義します。

インポートされているsliceとは、ReduxToolkit特有のものです。
slice は、Reduxストアの状態（state）とアクション（action）を定義し、Reduxのリデューサー（reducer）を生成するための便利な方法です。Redux Toolkitは、Reduxコードをより効率的に記述できるようにするためのユーティリティを提供するライブラリで、slice はその一部です。

このStoreには、clipSliceとfacoriteSliceが定義されていますが、今回はclipSliceについて説明していきます。

このsliceでは、「addClip」と「deleteClip」というReducerが定義されています。
このReducerをView側から呼び出していきます。
以下は、記事をクリップするボタンのコンポーネントです。
メソッドをpropsで受け取っています。

今回は、記事の詳細ページでコンポーネントを使用してみました。
少し長いので見にくいかもです...

コードを抜粋して、説明していきます。

DispatchはuseDispatchをインポートしてきます。
そして、引数にインポートしてきたsliceから使いたいreducerを指定します。
ここでは、開いた記事がクリップされていなければ、addClipをdispatchして記事をstoreに追加、クリップしていれば、deleteClipをdispatchして、記事をstoreから削除するReducerが通知されるようになっています。

そして以下のコードで、ボタンのコンポーネントにメソッドを渡しています。

次はクリップした記事を表示するコードはこちらです。

useSelecter()をインポートして、store.jsに指定したclipを指定して、clipのデータを取得してきます。
そうすることで、Storeに登録したデータを取得することができます。
取得したデータは以下のコンポーネントに渡して表示しています。

そうすることで、以下のように動作します。

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する
[cv:issue_marketplace_engineer]