【ISSUE】Reduxの基礎知識
2024年12月23日 8:40
Reduxの基礎的な部分から、Redux Toolkitを使った、データの管理方法を書いていきます。
簡単に言うと、Reduxはデータを一つの場所で管理すれば、どこからでも使えるから楽だよねというイメージです。
各ファイルで同じデータを使うのであれば、そのファイルごとでデータを取得するのは面倒ですし、コードの量のも増えてしまいます。
以下の画像は、Reduxの仕組みを図で表したものです。
データの保管庫です。
データを他のファイルで使用する場合は、storeからデータを取得してきます。
Reducerとは、アプリケーションの状態を書き換える事が唯一できるものです。 Reduxの基本設計の1つであるSingle source of truth(ソースは1つだけ)でもあるようにStateを書き換える事ができるのはこのReducerのみです。(他のサイトからパクりました)
データを操作する時のメソッドと考えればいいかなと。
日本語だと送るとか送付するといった意味をもちます。データを操作する時には、dipatchを使って、どのようにデータを操作するか(action)を通知する役割をします。
storeのデータの状態を表すものです。
こちらはユーザーが目にする画面の部分です。
メリットは以下のようになります。
・コードの可読性が上がる。
・機能追加にも容易に対応できる。
・考え方はシンプルなので、理解すれば使いやすい。
・学習コスト
→仕組みや概念の理解が少し難しいかも
・コード量が増えてしまうことがある。
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。