Facebook が開発した In Flux アーキテクチャ：Store のライフサイクルを理解しよう
In Flux アーキテクチャにおける Store ライフサイクル管理
In Flux における Store は、アプリケーションの状態を保持するオブジェクトです。Store は、Action によって更新され、View によってレンダリングされます。
Store のライフサイクルは、アプリケーションの起動から終了まで続く一連のイベントで構成されます。
Store の作成
Store は、createStore() 関数を使用して作成されます。この関数は、Store の初期状態と Reducer を引数として受け取ります。
const store = createStore(
initialState,
reducer
);
Store は、Action によって更新されます。Action は、Store の状態を変更するオブジェクトです。Action は、dispatch() 関数を使用して Store に送信されます。
const action = {
type: 'INCREMENT_COUNTER',
};
store.dispatch(action);
Store のレンダリング
Store は、View によってレンダリングされます。View は、Store の状態を購読し、状態が変更されたときに更新されます。
const view = (state) => (
<div>
<h1>Counter: {state.counter}</h1>
</div>
);
store.subscribe(() => {
ReactDOM.render(view(store.getState()), document.getElementById('root'));
});
Store は、アプリケーションが終了する際に破棄されます。Store は、dispose() 関数を使用して破棄されます。
store.dispose();
Store ライフサイクルの管理
Store ライフサイクルを管理するには、次の点に注意する必要があります。
- Store の破棄
Store は、アプリケーションが終了する際に破棄する必要があります。 - Store のレンダリング
Store は、View によってレンダリングする必要があります。 - Store の更新
Store は、Action によってのみ更新する必要があります。
// Store の初期状態
const initialState = {
counter: 0,
};
// Reducer
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT_COUNTER':
return {
...state,
counter: state.counter + 1,
};
default:
return state;
}
};
// Store の作成
const store = createStore(initialState, reducer);
// View
const view = (state) => (
<div>
<h1>Counter: {state.counter}</h1>
<button onClick={() => store.dispatch({ type: 'INCREMENT_COUNTER' })}>
Increment Counter
</button>
</div>
);
// View のレンダリング
ReactDOM.render(view(store.getState()), document.getElementById('root'));
// Store の購読
store.subscribe(() => {
ReactDOM.render(view(store.getState()), document.getElementById('root'));
});
store.subscribe()関数を使用して、Store の状態が変更されたときに View を更新します。ReactDOM.render()関数を使用して、View を DOM にレンダリングします。view関数を使用して、Store の状態をレンダリングする方法を定義します。createStore()関数を使用して、Store を作成します。initialStateオブジェクトを使用して、Store の初期状態を定義します。
Middleware
Middleware は、Action が Store にディスパッチされる前に、Action を処理する関数です。Middleware は、Action をログに記録したり、Action を変換したり、他の Store にディスパッチしたりするなど、さまざまな目的に使用できます。
Middleware を使用して Store ライフサイクルを管理するには、Store が作成されたときに Middleware を登録する必要があります。Middleware は、Action がディスパッチされる前に呼び出され、Store の状態を変更したり、他の Action をディスパッチしたりすることができます。
const middleware = (store) => (next) => (action) => {
// Action を処理する
next(action);
// Store の状態を変更する
store.dispatch({ type: 'SOME_OTHER_ACTION' });
};
const store = createStore(initialState, reducer, middleware);
Saga
Saga は、非同期 Action を処理する関数です。Saga は、Action がディスパッチされたときに呼び出され、非同期タスクを実行したり、他の Action をディスパッチしたりすることができます。
const saga = createSaga(...);
const store = createStore(initialState, reducer, applyMiddleware(saga));
Redux DevTools
Redux DevTools は、Chrome 拡張機能で、Redux アプリケーションの状態をデバッグするのに役立ちます。Redux DevTools を使用して、Store の状態をタイムトラベルしたり、Action を再実行したり、Store の状態を変更したりすることができます。
Redux DevTools を使用して Store ライフサイクルを管理するには、Chrome 拡張機能をインストールして、Store に接続する必要があります。その後、Redux DevTools を使用して、Store の状態をデバッグすることができます。
javascript facebook architecture
