すべてのカテゴリ

Reduxのデータ処理に値を渡すには？前回の記事では、Redux Toolkit を利用して、Redux を React で利用する簡単な事例を紹介しました。今回は、Redux のデータの処理をする際に値を渡す例を紹介します。Redux のデータ処理は、「slice reducer」前回の記事で紹介した通り、Redux Toolkit を利用して、Redux で管理しているデータを処理するのは「slice reducer」です。前回の例では、Redux で管理するデータはカウンタの値でサポートする処理は二つでした。＊　カウンタを１づつ増やす＊　カウンタをリセットする（「０」に戻す）　この処理は、データを処理する際にデータを渡す必要はありませんでした。今回の記事は、カウンタに特定の値をセットするという処理を追加します。この処理をするためには、セットする値を指定する必要があります。まずは、前回紹介した「slice reducer」に「init」という処理を追加した例です。 追加した処理は、指定された値をカウンタの値（value）にセットする処理を行なっています。import {  ActionReducerMapBuilder,  createSlice,} from "＠reduxjs/toolkit";interface SampelState {  value: number;}interface Action {  type: string;  payload: any;}const initialState: SampelState = {  value: 0,};exp

Redux Toolkit を使った Redux 活用法Redux Toolkit を使うと Redux の設定が簡素化されます。この連載では、何回かに分けて Redux Toolkit を使った Redux の活用事例を紹介していきます。Redux Toolkit を利用する利点React などで Redux を利用する際のハードルになるのは、Redux を利用する為の細かい設定が初心者には面倒という点がありました。Vue などでよく利用される、Vuex や Pinia などの場合は、Redux に比べると設定の部分が大幅に簡素化されていて、初心者でも扱いやすいというのが大きな利点になっています。Redux Toolkit を利用すると、この設定の部分を大きく簡素化する事ができます。Redux Toolkit をする場合に必要な設定は：＊　ストアの作成＊　React への組み込み＊　Slice Reducer の作成とストアへの登録　この三点です。ストア(store)は、データを一括管理するための、Redux の仕組みと考えてください。 このストアには、後から説明する、「slice reducer」と呼ばれる、実際に一括管理するデータの定義と、そのデータの処理方法を記述するモジュールを登録する必要がありますが、最初はまずその「型」を作ります。「slice reducer」は作成後に追加で登録すれば OK です。その後で、作成したストア（store）を React に組み込んで、あとは、実際のデータとその処理方法を記述した、「slice reducer」を作成して、最初に作成し

少し簡単になった ReduxReact でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします！React で Redux を利用するための設定Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。実際に必要な設定は大きく分けて以下の三つの設定です：＊　ストア（store)の作成＊　アクション(action)の定義＊　各アクションに対応した、ス