このページは PageTurner AI で翻訳されました(ベータ版)。プロジェクト公式の承認はありません。 エラーを見つけましたか? 問題を報告 →
用語集
これはReduxの主要な用語とその型シグネチャの用語集です。型注釈にはFlow記法を使用しています。
State(状態)
type State = any
State(_状態ツリー_とも呼ばれる)は広義の用語ですが、Redux APIでは通常、ストアによって管理されgetState()で返される単一の状態値を指します。これはReduxアプリケーション全体の状態を表し、しばしば深くネストされたオブジェクトとなります。
慣例として、トップレベルの状態はオブジェクトやMapのようなキーバリューコレクションですが、技術的には任意の型を指定できます。ただし状態はシリアライズ可能に保つべきです。JSONに簡単に変換できないものは含めないでください。
Action(アクション)
type Action = Object
Action(アクション)は状態変更の意図を表すプレーンオブジェクトです。ストアにデータを投入する唯一の手段であり、UIイベント、ネットワークコールバック、WebSocketなどのあらゆるデータソースは最終的にアクションとしてディスパッチされる必要があります。
アクションは実行するアクションタイプを示すtypeフィールドが必須です。タイプは定数として定義し他のモジュールからインポートできます。typeにはシリアライズ可能な文字列を、Symbolではなく使用すべきです。
type以外のアクションオブジェクトの構造は自由です。関心があれば、アクション構築方法の推奨事項であるFlux Standard Actionを参照してください。
後述の非同期アクションも参照してください。
Reducer(リデューサー)
type Reducer<S, A> = (state: S, action: A) => S
Reducer(リデューサー)は累積値と入力値を受け取り新たな累積値を返す関数です。値の集合を単一値に縮約(reduce)するために使用されます。
リデューサーはRedux固有の概念ではなく、関数型プログラミングの基本概念です。JavaScriptのような非関数型言語にも組み込みの縮約APIがあり、JavaScriptではArray.prototype.reduce()が該当します。
Reduxでは、累積値が状態オブジェクトであり、累積される値がアクションです。リデューサーは前回の状態とアクションから新しい状態を計算します。これらは_純粋関数_である必要があり、同じ入力に対して常に同じ出力を返し、副作用もありません。これによりホットリロードやタイムトラベルといった機能が実現可能になります。
リデューサーはReduxで最も重要な概念です。
リデューサー内でAPI呼び出しをしないでください。
Dispatching Function(ディスパッチ関数)
type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
Dispatching Function(ディスパッチ関数)はアクションまたは非同期アクションを受け入れ、その後ストアに対して1つ以上のアクションをディスパッチする(またはしない)関数です。
一般的なディスパッチ関数と、ミドルウェアなしでストアインスタンスが提供する基本のdispatch関数を区別する必要があります。
基本のdispatch関数は常に同期的にアクションをストアのリデューサーに送信し、ストアから返された前回の状態と共に新しい状態を計算します。リデューサーで即時処理可能なプレーンオブジェクト形式のアクションを期待します。
ミドルウェアは基本のdispatch関数をラップします。これによりdispatch関数は通常のアクションに加えて非同期アクションも処理可能になります。ミドルウェアは次のミドルウェアに渡す前段階で、アクションや非同期アクションを変換、遅延、無視、解釈する場合があります。詳細は後述します。
Action Creator(アクションクリエイター)
type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction
アクションクリエーター(Action Creator)とは、その名の通りアクションを作成する関数です。この2つの用語を混同しないでください。アクションは情報のペイロードであり、アクションクリエーターはアクションを生成するファクトリーです。
アクションクリエーターを呼び出してもアクションが生成されるだけで、ディスパッチは行われません。実際の状態変更を起こすには、ストアのdispatch関数を呼び出す必要があります。バウンドアクションクリエーターとは、アクションクリエーターを呼び出し、その結果を特定のストアインスタンスに即時ディスパッチする関数を指します。
アクションクリエーターが現在の状態を読み取ったり、API呼び出しを行ったり、ルーティング遷移のような副作用を引き起こす必要がある場合、アクションではなく非同期アクションを返すべきです。
非同期アクション(Async Action)
type AsyncAction = any
非同期アクションとは、ディスパッチ関数に送信されるが、レデューサーによる処理の準備がまだ整っていない値です。ミドルウェアによって変換され、基本のdispatch()関数に送信される前にアクション(または一連のアクション)となります。使用するミドルウェアによって異なるタイプを持つ可能性があり、Promiseやサンクなどの非同期プリミティブであることが一般的です。これらは即座にレデューサーに渡されず、操作完了後にアクションのディスパッチをトリガーします。
ミドルウェア
type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch
ミドルウェアとは、ディスパッチ関数を合成して新しいディスパッチ関数を返す高階関数です。多くの場合、非同期アクションをアクションに変換します。
ミドルウェアは関数合成を用いて構成可能です。アクションのログ記録、ルーティングのような副作用の実行、非同期API呼び出しを一連の同期アクションに変換する際に有用です。
詳細についてはapplyMiddleware(...middlewares)を参照してください。
ストア
type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}
ストア(Store)はアプリケーションの状態ツリーを保持するオブジェクトです。 Reduxアプリでは単一のストアのみが存在すべきであり、合成はレデューサーレベルで行われます。
-
dispatch(action):前述の基本ディスパッチ関数 -
getState():ストアの現在の状態を返す -
subscribe(listener):状態変化時に呼び出される関数を登録 -
replaceReducer(nextReducer):ホットリロードやコード分割の実装に使用可能(使用頻度は低い)
詳細は完全なストアAPIリファレンスを参照してください。
ストアクリエーター(Store Creator)
type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store
ストアクリエーターとはReduxストアを作成する関数です。ディスパッチ関数と同様に、Reduxパッケージからエクスポートされる基本のストアクリエーターcreateStore(reducer, preloadedState)と、ストアエンハンサーから返されるストアクリエーターを区別する必要があります。
ストアエンハンサー(Store Enhancer)
type StoreEnhancer = (next: StoreCreator) => StoreCreator
ストアエンハンサーとは、ストアクリエーターを合成して新しい拡張ストアクリエーターを返す高階関数です。ミドルウェアと同様に、合成可能な方法でストアインターフェースを変更できます。
ストアエンハンサーは、Reactの高階コンポーネント(「コンポーネントエンハンサー」とも呼ばれる)と非常に似た概念です。
ストアはインスタンスではなく、関数のプレーンオブジェクトコレクションであるため、元のストアを変更せずに簡単にコピーや修正が可能です。composeドキュメントに実例があります。
ストアエンハンサーを自ら作成することは稀ですが、開発者ツールが提供するものを使用する可能性はあります。これにより、アプリケーションに気付かれることなくタイムトラベルを実現できます。興味深いことに、Reduxミドルウェアの実装自体がストアエンハンサーです。