deve.K

エンジニアが未来を切り開く。

English

React Hook 【useReducer】使い方 基礎


スポンサーリンク

react画像

本日はReact Hookの『useReducer()』の解説をしていきます。

『useReducer』は非常に高度なフックであり、

初心者に関しては実際に使用方法をよく知らないことがあります。

ですが、このフックはより適切で明確なコードを作成するのに非常に皆様の役に立ってくれるはずです。

是非覚えて今回で『useState』の勉強から1ランク上へいきましょう。

useReducerとは

『状態』管理フックとして『useState』これは、

コンポーネントの状態を管理できるようにするフックです。

ただし、『useReducer』フックの動作方法は『useState』とはかなり異なります。

代替え品というものです

どう言った場合に活用するのか

『useReducer』はコンポーネントの階層が深く、複雑な状態を持ち多くの異なる状態を管理していかなければならない

または以前のステートを元に新しい状態として作る場面での時に使用されます。

つまり、すべての状態を管理し1つのオブジェクトによってまとめることができます。

状態を1つのオブジェクトとしてまとめる?

Reduxですか?

気付いた方はいるかと思います

はい、つまり 特定のアクション(動作)がディスパッチされたときにコンポーネントの状態の一部を更新できます。

これは『Redux』の動作と非常によく似ています。

ですが、状態は常にオブジェクトである必要はありません。

『配列』『数値』でもかまいません。

『useReducer』のレデューサーはReduxからのものであり

『Redux』はJavaScriptの『Array.reduce()』から借用しているのです。

これまでの開発者の間で最も人気のあるフックの1つはこの『useReducer』とも言えます。

複雑な状態の操作と更新を処理できるようになるという事です。

なんとなく機能は理解できましたでしょうか?

では実際に活用方法を見ていきましょう。

カウンターコンポーネントでの簡単な解説になります。

create-react-appのご準備をお願い致します。

使用例

まずは全体コードをどうぞ

import React from 'react';
import { useReducer } from 'react';
import './App.css';

const App = () => {

const [count, dispatch] = useReducer(myReducer, 0);

const myReducer = (state, action) => {

    switch(action) {

      case 'INCREMENT':

      return state + 1

      case 'DECREMENT':

      return state - 1

      default:
        throw new Error()
    }
    }
  return(
    <div >
      <header className='App-header'>
      <p>Counter: {count}</p>

<button onClick={() => dispatch('INCREMENT')}>+</button>

<button onClick={() => dispatch('DECREMENT')}>-</button>

      </header>
    </div>
  )
}

export default App;

DEMO

reactGIF画像

では分割しながら解説致します。

import { useReducer } from 'react';

しっかり読み込まれるように、モジュールのインポートをしましょう。

const App = () => {

const [count, dispatch] = useReducer(myReducer, 0);

}

『useReducer』の引数はレデューサー関数と2つの引数を使用してHookを呼び出し

2つ目が初期状態となります。

レデューサーは『状態』と『動作』2つの引数を取るので現在の状態の値は『0』です。

つまり『useReducer』フックは『状態』と『dispatch』と呼ばれる関数の2つを返すという事になります。

補足ですが、3番目の引数もあると言う事も知っておいて下さい。

ほぼ『useState』に近いですね

なので『useState』を理解してれば、そこまで難しい事ではないんです!。

const myReducer = (state, action) => {

    switch(action) {

      case 'INCREMENT':

      return state + 1

      case 'DECREMENT':

      return state - 1

      default:

        throw new Error()
    }
    }

基本的に『useReducer』はSwitch文を使用しますが『if文』でも構いません。

『dispatch』呼び出すときに指定される引数は、今回では『myReducer関数』(action)に指定されている2番目の引数となります。

レデューサーは状態と動作を実行する関数であるので任意での値にすることが可能となります。

このコードでは文字列とし、『DECREMENT』で『カウンター』を1ずつ減らしていきます。

『INCREMENT』は増加、増えていきます。

そしてレデューサーは動作を実行した後、新しい『状態』を返します。

  return(
    <div >
 <header className='App-header'>

      <p>Counter: {count}</p>

<button onClick={() => dispatch('INCREMENT')}>+</button>

<button onClick={() => dispatch('DECREMENT')}>-</button>

      </header>
    </div>
  )

この『dispatch』は『useState』関数と同じ動作です。

『dispatch』は『依存関係配列』に配置した場合、トリガーされないので注意して下さい。

オブジェクトでの場合もさほど難しくはありませんのでぜひ使ってみて下さい。

import { useReducer } from 'react';

const ObjValue = {
  firstName: '',
  lastName: '',
  username: '',
  email: '',
};

const myReducer = (state, action) => {
  switch (action.type) {
    case 'update':
      return {
       //省略
  }
};

TypeScriptが分かる方なら、どのように適切に書いていくか思わられたかと思います。

import { useReducer, ChangeEvent } from 'react';

type State = {
  firstName: string;
  lastName: string;
  username: string;
  email: string;
};

const myReducer = (state, action) => {
  switch (action.type) {
    case 'update':
      return {
       //省略
  }
};

難しくはないですね!

『useReducer』に関してはまた記事にしたいと思います


『useReducer』を早く理解したいのであれば、

『dispatch』を先に理解すれば、自ずと分かってきます。

『useReducer』は『useState』とほぼ変わりません

ですがむやみやたらと使用するのはやめましょう!

『useReducer』は大規模で複雑なコンポーネント間でのアプリ開発で使用される事が多いです。

使い分けて、なるべく『useState』を使用していき問題が起きた時は『useReducer』で代替えして下さい。

そして『useReducer』を理解できれば、Reduxの学習時の理解も簡単となります。

最後までお読み頂きありがとうございました!。

プライバシーポリシー