[React]useReducerの使い方メモ

useReducerがかなり便利そうだったので、メモします。

useReducerとは

useReducerは、Reactアプリ内での状態管理を行う機能です。

状態とは、例えば変数が保持する値などを指します(それだけではないと思いますが)。

Counterアプリ

公式サイトを例に、Counterアプリを作成しましょう。

事前準備

例えば、以下の様なファイル構成だとします。

App.jsの実装は、以下の通りです。

Counter.jsのテンプレート

Counter.jsのテンプレートは、以下の通りです。

ここに、useReducerを使った実装をしていきます。

useReducerのインポート

最初にuseReducerをインストールします。

これで、useReducerが使えるようになりました。

initialStateの実装

counterの初期値を格納する変数を用意しておきます。

このinitialStateを状態管理します。

Reducerの作成

次に、reducerを作成します。

reducerは、currentStateとactionの二つの引数を持ちます。

currentには、状態管理しているstate情報(ここでは、initialState)が入り、actionには、state情報に対して処理したいactionが入ります。例えば、increment(増加)、decrement(減少)ですね。

useReducerの使用

さて、いよいよuseReducerを使ってみましょう。

CounterコンポーネントにuseReducerを追加してください。

userReducerには、reducer関数と、状態管理したいState情報(initialState)を渡します。

このようにすると状態管理しているstate(count)と状態変化のトリガー(dispatch)を取得することができます。

アクションの追加

最後に、アクションを追加します。

Buttanタグを追加して、dispatchに動作させたいactionを指定しました。

動作確認

ブラウザ上から動作確認してみましょう。

画面を開いた時
incrementを押下した時
decrementを押下した時
resetを押下した時

問題なく、動作していますね。

count変数を簡単に状態変化させることができました。

完成系のコード

おわりに

Reactを勉強していて改めて思ったのは、「React超便利」という事実ですね。

現職では、JavaScriptやjQueryを使ってますが、Reactを導入したい。。。

それでは、また!

関連記事

こちらもどうぞ。

コメントを残す