Redux は、JavaScript アプリケーション、特に React で広く使用されている状態管理ライブラリです。アプリの状態を一元的に保存できるため、特に大規模で複雑なアプリケーションの管理とデバッグが容易になります。 Redux は一方向のデータ フローに従い、状態の変化が予測可能な方法で発生することを保証し、アプリがどのように動作するかを理解しやすくします。
Redux の基本を段階的に説明し、各概念をコード例で説明します。
Redux は、JavaScript アプリの予測可能な状態コンテナーです。これにより、アプリの状態を一元管理できるようになり、デバッグとスケールが容易になります。
Redux は次の主要コンポーネントに依存しています:
アクションは、アプリケーション内で発生したイベントまたはアクションを記述するプレーンな JavaScript オブジェクトです。各アクションには、実行されるアクションを説明する type プロパティが必要です。
// actions.js export const increment = () => ({ type: 'INCREMENT' }); export const decrement = () => ({ type: 'DECREMENT' });
reducer は、現在の状態とアクションを受け取り、新しい状態を返す純粋な関数です。レデューサーは、アクションに応じて状態がどのように変化するかを指定する関数です。これらは純粋な関数である必要があります。つまり、元の状態は変更せず、新しい状態オブジェクトを返します。
// actions.js export const increment = () => ({ type: 'INCREMENT' }); export const decrement = () => ({ type: 'DECREMENT' });
ストアは、アプリケーションの状態全体を保持します。ストアは Redux の createStore メソッドを使用して作成され、アプリケーションの状態が保存されます。このストアは、アクションをディスパッチし、状態の変更をサブスクライブするメソッドも提供します。
// reducer.js const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; export default counterReducer;
React コンポーネントは、状態を取得してアクションをディスパッチするために Redux ストアと対話する必要があります。 React と Redux を接続するには、別個のライブラリである React-Redux が使用されます。ストアの状態にアクセスするための useSelector やアクションをディスパッチするための useDispatch などのフックを提供します。
Redux をシンプルな React アプリに接続するための完全なセットアップを見てみましょう。
まず、Redux と React-Redux をインストールする必要があります:
// store.js import { createStore } from 'redux'; import counterReducer from './reducer'; const store = createStore(counterReducer); export default store;
Redux では、アクションは状態に加えたい変更を記述するプレーンな JavaScript オブジェクトです。
npm install redux react-redux
リデューサーは、現在の状態とアクションを受け取り、新しい状態を返す関数です。
// actions.js export const increment = () => ({ type: 'INCREMENT' }); export const decrement = () => ({ type: 'DECREMENT' });
店は国家が生きる場所だ。 Redux の createStore メソッドを使用して作成されます。
// actions.js export const increment = () => ({ type: 'INCREMENT' }); export const decrement = () => ({ type: 'DECREMENT' });
ここで、Provider、useDispatch、および useSelector フックを使用して Redux を React アプリに接続しましょう。
// reducer.js const initialState = { count: 0 }; const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } }; export default counterReducer;
Redux を使いやすくするために、Redux Toolkit は定型コードを減らしてセットアップを簡素化します。これは、reducer の作成やストアの構成などの一般的なタスクを処理する createSlice や configureStore などのユーティリティを提供します。
// store.js import { createStore } from 'redux'; import counterReducer from './reducer'; const store = createStore(counterReducer); export default store;
Redux は、React アプリケーションのグローバル状態を管理するための強力なツールです。アクション、リデューサー、ストアを理解することで、複雑な状態を予測可能な方法で管理できます。 Redux Toolkit を使用すると、このプロセスをさらに簡素化できます。 Redux を正しく使用すると、大規模なアプリケーションの管理、デバッグ、拡張が容易になります。
この知識により、Redux を React アプリケーションに組み込む準備が整い、アプリ全体でより効率的な状態管理が保証されます。
以上がRedux の基本をマスターする: React での状態管理の完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。