Redux と Context.Provider のどちらを選択するかは、処理している状態の複雑さと規模によって決まります。 Redux は、複数のコンシューマで頻繁に更新される複雑なグローバル状態の管理に優れており、パフォーマンスの最適化とスケーラビリティの向上を保証します。一方、Context.Provider はよりシンプルで、ローカライズされた状態管理により適しており、Redux によって生じるオーバーヘッドを回避します。この記事では、コード例を示しながら各アプローチの長所と短所を詳しく掘り下げ、実際のシナリオでパフォーマンスを最適化するために Redux をどのように最適化できるかを検討します。
Redux と Context.Provider: いつどちらを使用するか?
Redux を使用する場合:
複雑な状態管理:
デバッグおよび開発者ツール:
副作用用のミドルウェア:
スケーラビリティ:
単純またはローカライズされた状態:
定型文の回避:
ミドルウェアは不要:
コンポーネントのテーマまたは構成状態:
場合によっては、同じアプリケーションで Redux と Context.Provider の両方を使用したい場合があります。例:
Next.js アプリケーションで、Redux が Context.Provider のいくつかの欠点を解決できる 2 つのシナリオと、Context.Provider がよりシンプルで適切なソリューションである別のシナリオを見てみましょう。
問題: 頻繁な更新と複数のコンシューマによる複雑な状態
異なるページにわたる複数のコンポーネントが共有状態にアクセスして更新する必要がある Next.js アプリがあると想像してください。状態は複雑で、頻繁に変化します (e コマース アプリでのショッピング カートの管理など)。 Context.Provider を使用すると、状態が更新されるたびに、コンポーネント ツリー全体で不要な再レンダリングがトリガーされる可能性があります。
Redux によるソリューション: Redux を使用すると、一元化されたストア、リデューサー、およびアクションを使用して、この複雑な状態を効率的に管理できます。不必要な再レンダリングを最小限に抑え、セレクターとメモ化を通じてパフォーマンスを向上させます。
// store.ts
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';
export const store = configureStore({
reducer: {
cart: cartReducer,
},
});
// cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface CartState {
items: { id: number; name: string; quantity: number }[];
}
const initialState: CartState = { items: [] };
const cartSlice = createSlice({
name: 'cart',
initialState,
reducers: {
addItem(state, action: PayloadAction<{ id: number; name: string }>) {
const item = state.items.find(i => i.id === action.payload.id);
if (item) {
item.quantity += 1;
} else {
state.items.push({ ...action.payload, quantity: 1 });
}
},
removeItem(state, action: PayloadAction<number>) {
state.items = state.items.filter(i => i.id !== action.payload);
},
},
});
export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;
// index.tsx
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../store';
import { addItem, removeItem } from '../cartSlice';
export default function Home() {
const cartItems = useSelector((state: RootState) => state.cart.items);
const dispatch = useDispatch();
return (
<div>
<h1>Shopping Cart</h1>
<ul>
{cartItems.map(item => (
<li key={item.id}>
{item.name} - {item.quantity}
<button onClick={() => dispatch(removeItem(item.id))}>Remove</button>
</li>
))}
</ul>
<button onClick={() => dispatch(addItem({ id: 1, name: 'Item 1' }))}>
Add Item 1
</button>
</div>
);
}
Redux が優れている理由:
Markdown でフォーマットされた記事の残りの部分は次のとおりです:
問題: テーマの単純な状態管理
アプリケーションのテーマ (ライト/ダーク モード) を管理するシナリオを考えてみましょう。状態は単純で、アクセスする必要があるコンポーネントはわずかです。
Context.Provider を使用したソリューション:
この場合、Context.Provider を使用する方が簡単で軽量です。
// ThemeContext.tsx
import { createContext, useState, useContext, ReactNode } from 'react';
interface ThemeContextProps {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
// index.tsx
import { useTheme } from '../ThemeContext';
export default function Home() {
const { theme, toggleTheme } = useTheme();
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
<h1>Current Theme: {theme}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
}
// _app.tsx
import { ThemeProvider } from '../ThemeContext';
export default function MyApp({ Component, pageProps }) {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}
Context.Provider の方が優れている理由:
シンプルさ: テーマはシンプルでローカライズされた状態であり、Context.Provider は、Redux のオーバーヘッドなしでテーマを管理するための最小限かつ直接的な方法を提供します。
定型文の削減: アクション、リデューサー、ストアは必要ありません。状態は React フックを使用して直接管理されるため、コードベースが小さくなり、理解しやすくなります。
Transagate.ai では、Redux により開発速度が大幅に向上しました。状態管理を一元化することで、パフォーマンスを犠牲にすることなく機能を迅速に提供できるようになりました。再レンダリングを微調整し、複雑な状態を効果的に管理できることで創造性が解き放たれ、堅牢でスケーラブルなソリューションを構築できるようになりました。 Redux の予測可能な状態更新と広範なエコシステムにより、Redux が開発プロセスの重要な部分となり、イノベーションとユーザー エクスペリエンスに集中できるようになりました。
以上がRedux と Context.Provider: React アプリケーションでの状態管理の選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
