複数のstateの同時更新
Reactで複数の状態(state)を同時に更新するには、useState
フックの代わりにuseReducer
フックを使用することがあります。useReducer
フックは、複雑な状態ロジックを持つコンポーネントや、複数の状態をまとめて管理したい場合に便利です。
使用方法
以下は、useReducer
フックを使用して複数の状態を同時に更新する方法の例です。
import React, { useReducer } from 'react';
// 初期状態
const initialState = {
count: 0,
text: ''
};
// reducer関数
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { ...state, count: state.count + 1 };
case 'decrement':
return { ...state, count: state.count - 1 };
case 'setText':
return { ...state, text: action.payload };
default:
return state;
}
};
function MyComponent() {
// reducer関数と初期状態を渡してstateとdispatch関数を取得する
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
<input
type="text"
value={state.text}
onChange={(e) => dispatch({ type: 'setText', payload: e.target.value })}
/>
</div>
);
}
export default MyComponent;
この例では、useReducer
フックを使用してreducer
関数とinitialState
を渡して、state
とdispatch
関数を取得します。dispatch
関数を使用してアクションを送信し、reducer
関数によって新しい状態が計算されます。dispatch
関数は、アクションを受け取り、それに基づいて状態を更新するために使用されます。このようにして、複数の状態を同時に更新することができます。