こんにちは。

最近Reactの勉強を再開したので、useReducerに関するコードをなにも見ずに書いてみます。

—

import React, { useReducer } from ‘react’;

// Reducer関数
const counterReducer = (state, action) => {
switch (action.type) {
case ‘INCREMENT’:
return { count: state.count + 1 };
case ‘DECREMENT’:
return { count: state.count – 1 };
default:
return state;
}
};

// 初期状態
const initialState = { count: 0 };

// コンポーネント
const Counter = () => {
// useReducerの呼び出し
const [state, dispatch] = useReducer(counterReducer, initialState);

return (

);
};

export default Counter;

—

stateの管理をする際の例としてカウンターを使用するのって定番ですよね。

useReducerはcreateContextとセットで使用される事が多いですが、今回はuseReducerしか使用していないのでかなり簡単なコードとなりました。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

佐々木 貴至

最新記事 by 佐々木 貴至 (全て見る)

• React Hooks - 2024年2月29日
• インボイス - 2023年12月1日
• Next.js - 2023年9月30日