ReactにおけるuseState()フックでコンポーネント間で状態を共有できるか？
2024-10-18
はい、ReactのuseState()フックでコンポーネント間で状態を共有することは可能です。ただし、直接的な方法はありません。
方法
-
Context API
createContext()でコンテキストオブジェクトを作成します。- 親コンポーネントで
useContext()を使用してコンテキストオブジェクトを取得し、状態を管理します。
-
Redux
- グローバルな状態管理ライブラリであるReduxを使用します。
- Redux Storeを作成し、状態を管理します。
- コンポーネントで
useSelector()を使用してRedux Storeから状態を取得し、useDispatch()を使用して状態を更新します。
例
import React, { createContext, useState, useContext } from 'react';
// コンтекストオブジェクトを作成
const MyContext = createContext();
// 親コンポーネント
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
<ChildComponent />
</MyContext. Provider>
);
}
// 子コンポーネント
function ChildComponent() {
const { count, setCount } = useContext(MyContext);
return <div>Count: {count}</div>;
}
import React, { useState } from 'react';
import { createStore } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
// リデューサー関数
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
// ストアを作成
const store = createStore(reducer);
// コンポーネント
function CounterComponent() {
const count = useSelector(state => state);
const dispatch = useDispatch();
return (
<div>
Count: {count}
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
}
import React, { createContext, useState, useContext } from 'react';
// コンтекストオブジェクトを作成
const MyContext = createContext();
// 親コンポーネント
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
<ChildComponent />
</MyContext. Provider>
);
}
// 子コンポーネント
function ChildComponent() {
const { count, setCount } = useContext(MyContext);
return <div>Count: {count}</div>;
}
import React, { useState } from 'react';
import { createStore } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
// リデューサー関数
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
// ストアを作成
const store = createStore(reducer);
// コンポーネント
function CounterComponent() {
const count = useSelector(state => state);
const dispatch = useDispatch();
return (
<div>
Count: {count}
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
}
コード解説
- 子コンポーネントである
ChildComponentでuseContext(MyContext)を使用してコンテキストオブジェクトを取得し、その値にアクセスします。 - 親コンポーネントである
ParentComponentでMyContext.Providerを使用してコンテキストオブジェクトの値を提供します。
- ボタンをクリックすると、
INCREMENTアクションがディスパッチされ、リデューサーが実行されて状態が更新されます。 CounterComponentでuseSelectorを使用してRedux Storeから現在の状態を取得し、useDispatchを使用してアクションをディスパッチします。createStore(reducer)を使用してRedux Storeを作成します。reducerというリデューサー関数を定義します。この関数は、現在の状態とアクションを受け取り、新しい状態を返します。
import React, { createContext, useState, useContext } from 'react';
// コンтекストオブジェクトを作成
const MyContext = createContext();
// 親コンポーネント
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
<ChildComponent />
</MyContext. Provider>
);
}
// 子コンポーネント
function ChildComponent() {
const { count, setCount } = useContext(MyContext);
return <div>Count: {count}</div>;
}
import React, { useState } from 'react';
import { createStore } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
// リデューサー関数
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
// ストアを作成
const store = createStore(reducer);
// コンポーネント
function CounterComponent() {
const count = useSelector(state => state);
const dispatch = useDispatch();
return (
<div>
Count: {count}
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
}
Context APIとRedux以外にも、状態を共有するための方法があります。
プロップドリリング
- 複数のレベルのネストがある場合、プロップの伝達が複雑になります。
- 親コンポーネントから子コンポーネントにプロップとして状態を伝達します。
カスタムフック
- 状態の管理が複雑になる可能性があります。
- 独自のフックを作成して状態を管理し、複数のコンポーネントで再利用します。
リフティングステート
- プロップドリリングと同様、複数のレベルのネストがある場合、伝達が複雑になります。
- 子コンポーネントから親コンポーネントに状態を伝達し、親コンポーネントで状態を管理します。
javascript reactjs react-hooks
