• ホーム
• ブログ
• Firebase情報

Reduxのデータ処理に値を渡すには？

2022年6月28日

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,
};
export const sampleSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    clear: (state: SampelState): void => {
      state.value = 0;
      state.data = [];
    },
    increment: (state: SampelState): void => {
      state.value += 1;
    },
    // Example with an argument (action)
    init: (state: SampelState, action: Action): void => {
      state.value = action.payload;
    },
  }
});
export const { clear, increment, init } = sampleSlice.actions;
export default sampleSlice.reducer;

今回追加した処理だけを抜き出すと以下のようになっています。

    init: (state: SampelState, action: Action): void => {
      state.value = action.payload;
    },

前回の例と違って、「action」が追加されています。型は「Action」で次のように定義されています。

interface Action {
  type: string;
  payload: any;
}

この「payload」というのが実際に「value」に設定される値です。

呼び出す時にはどうするか？

では、この処理を呼び出す方はどうなっているでしょうか？ 今回は、前回の表示にカウンタに設定する値を入力するフィールドと、新しいボタンを追加して、ボタンがクリックされたら、入力されている値をカウンタにセットするという形にしています。

追加した表示の部分だけを抜き出すとこのような感じになっています。

<div className="form-group">
  <input className="form-cotnrol" type="text" ref={valueField} />
  <button className="btn btn-primary" onClick={() => initBtnClicked()}>
    Init
  </button>
</div>

セットする値を入力するフィールドと、値をセットする処理を呼び出すためのボタンになっています。

以下の関数が、ボタンがクリックされた際に呼び出される処理です。

function initBtnClicked() {
  if (valueField.current) {
    const value: string = valueField.current.value;
    if (!isNaN(parseInt(value))) {
      dispatch(init(parseInt(value)));
    }
  }
}

設定する値が数値の場合のみ、データを更新する処理を呼び出しています。 呼び出す際に渡しているのが、設定する値「value」です。

何か気づきませんか？

呼び出される側では、「action」という、「Action」という型です。

    init: (state: SampelState, action: Action): void => {
      state.value = action.payload;
    },

一方で呼び出している方では。

dispatch(init(parseInt(value)));

これを見ると設定する値に相当する「parseInt(value)」しか渡していません。

ここだけを見ると、呼び出す方と呼び出される側が一致していないように見えます。

実は、この処理は、「slice reducer」の処理を直接呼び出している訳ではありません。この間には、Redux Toolkit が裏で橋渡しをやっているので、この部分が一致していないように見える理由です。

Redux Toolkit は裏方で色々やってくれる！

実際に、Redux Toolkit を利用しないで Redux を利用されていた方は実際に、Redux Toolkit が裏でやってくれている事がある程度想像できると思います。要は Redux Toolkit が裏方でやっている事が、Redux が難しいと言われていた処理という事です。

Redux Toolkit はそうした面倒な部分を利用者から見えない部分で処理するような仕組みです。以前は、そうした処理一つ一つをきちんと理解して自分で実装する必要がありましたが、Redux Toolkit を利用すると面倒な部分を意識する必要がなくなります。

実際の記述では、矛盾しているように見える所もありますが、その部分は「このように記述する」と覚えて利用する必要があります。

今回の例では、「slice reducer」の方では、「payload」という形でデータを扱うように記述して、呼び出し側では、設定する値を渡せば橋渡しは Redux Toolkit が面倒を見てくれるという形で書くことを覚えるという事になります。

まとめ

Redux は初心者には分かりにくい部分が多く、初心者が学習する際の大きなハードルになる場合が多くなっていました。それに比べると、Vue でよく利用される、Vuex や Pinia などは、比較的扱いやすく、初心者でも書き方を覚えれば使いやすいというのが大きなセールスポイントになっていました。

Redux Toolkit はそうした難しいと言われていた部分を裏方で処理することで、利用者に面倒な部分を見せいない工夫をした仕組みになっています。Redux Toolkit を利用すると、今まで難しく感じられた Redux も比較的簡単に利用できるようになります。

React を利用する際の一つの障害になっていた Redux を手軽に利用できるようになったので、Web 開発で React も初心者の選択肢に数えることが可能にな ri ました。

今まで、Redux は難しいと考えていた方、ぜひ Redux Toolkit を試してみてください！

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.