useReducerがかなり便利そうだったので、メモします。
useReducerとは
useReducerは、Reactアプリ内での状態管理を行う機能です。
状態とは、例えば変数が保持する値などを指します(それだけではないと思いますが)。
Counterアプリ
公式サイトを例に、Counterアプリを作成しましょう。
事前準備
例えば、以下の様なファイル構成だとします。
|
1 2 3 4 |
src L App.js L components L Counter.js |
App.jsの実装は、以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; import Counter from './components/Counter'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <Counter /> </header> </div> ); } export default App; |
Counter.jsのテンプレート
Counter.jsのテンプレートは、以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react' const Counter = () => { return ( <div> </div> ) } export default Counter |
ここに、useReducerを使った実装をしていきます。
useReducerのインポート
最初にuseReducerをインストールします。
|
1 |
import React, {useReducer} from 'react' |
これで、useReducerが使えるようになりました。
initialStateの実装
counterの初期値を格納する変数を用意しておきます。
|
1 2 3 |
import React, {useReducer} from 'react' const initialState = 0 |
このinitialStateを状態管理します。
Reducerの作成
次に、reducerを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, {useReducer} from 'react' const initialState = 0 const reducer = (currentState, action) => { // actionには、操作内容が入る switch(action) { case 'increment': // increment -> action return currentState + 1 case 'decrement': // decrement -> action return currentState - 1 case 'reset': // reset -> action return initialState default: return currentState // どれにも当てはまらないとき } } |
reducerは、currentStateとactionの二つの引数を持ちます。
currentには、状態管理しているstate情報(ここでは、initialState)が入り、actionには、state情報に対して処理したいactionが入ります。例えば、increment(増加)、decrement(減少)ですね。
useReducerの使用
さて、いよいよuseReducerを使ってみましょう。
CounterコンポーネントにuseReducerを追加してください。
|
1 2 3 4 5 6 7 8 9 10 |
const Counter = () => { const [count, dispatch] = useReducer(reducer, initialState) return ( <div> </div> ) } |
userReducerには、reducer関数と、状態管理したいState情報(initialState)を渡します。
このようにすると状態管理しているstate(count)と状態変化のトリガー(dispatch)を取得することができます。
アクションの追加
最後に、アクションを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const Counter = () => { const [count, dispatch] = useReducer(reducer, initialState) return ( <div> <div>Count {count}</div> <button onClick={() => dispatch('increment')}>Increment</button> <button onClick={() => dispatch('decrement')}>Decrement</button> <button onClick={() => dispatch('reset')}>Reset</button> </div> ) } |
Buttanタグを追加して、dispatchに動作させたいactionを指定しました。
動作確認
ブラウザ上から動作確認してみましょう。
問題なく、動作していますね。
count変数を簡単に状態変化させることができました。
完成系のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React, {useReducer} from 'react' const initialState = 0 const reducer = (currentState, action) => { // actionには、操作内容が入る switch(action) { case 'increment': // increment -> action return currentState + 1 case 'decrement': // decrement -> action return currentState - 1 case 'reset': // reset -> action return initialState default: return currentState // どれにも当てはまらないとき } } const Counter = () => { const [count, dispatch] = useReducer(reducer, initialState) return ( <div> <div>Count {count}</div> <button onClick={() => dispatch('increment')}>Increment</button> <button onClick={() => dispatch('decrement')}>Decrement</button> <button onClick={() => dispatch('reset')}>Reset</button> </div> ) } export default Counter |
おわりに
Reactを勉強していて改めて思ったのは、「React超便利」という事実ですね。
現職では、JavaScriptやjQueryを使ってますが、Reactを導入したい。。。
それでは、また！
関連記事
こちらもどうぞ。
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。