非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

Store

ストア(Store)はアプリケーション全体の状態ツリー(state tree)を保持します。内部の状態を変更する唯一の方法は、アクション(action)をディスパッチ(dispatch)することです。これによりルートリデューサ関数(root reducer function)がトリガーされ、新しい状態が計算されます。

ストアはクラスではありません。単にいくつかのメソッドを持ったオブジェクトです。

ストアを作成するには、ルートリデューサ関数(reducer function)をRedux ToolkitのconfigureStoreメソッドに渡します。これにより適切なデフォルト設定でReduxストアがセットアップされます。（あるいは、まだRedux Toolkitを使用していない場合は、従来のcreateStoreメソッドも使用できますが、できるだけ早くRedux Toolkitへの移行をお勧めします）

ストアメソッド

getState()

アプリケーションの現在の状態ツリーを返します。これはストアのリデューサが最後に返した値と等しくなります。

戻り値

(any): アプリケーションの現在の状態ツリー

dispatch(action)

アクションをディスパッチします。状態変更をトリガーする唯一の方法です。

ストアのリデューサ関数が現在のgetState()の結果と指定されたactionを引数に同期的に呼び出されます。その戻り値が次の状態として扱われます。この値は以後getState()から返され、変更リスナーには直ちに通知されます。

注意

リデューサ(reducer)内部でdispatchを呼び出そうとすると、"Reducers may not dispatch actions"（リデューサはアクションをディスパッチできません）というエラーが発生します。リデューサは純粋関数(pure functions)であり、新しい状態値を返すことだけができ、副作用(side effects)を持ってはいけません（ディスパッチは副作用です）。

Reduxでは、サブスクリプション(subscriptions)はルートリデューサが新しい状態を返した後に呼び出されるため、サブスクリプションリスナー内ではディスパッチできます。リデューサ内部でのディスパッチが禁止されているのは、副作用を持たない必要があるためです。アクションに応答して副作用を引き起こしたい場合、適切な場所は潜在的に非同期となるアクションクリエイター(action creator)内です。

引数

action (Object^†): アプリケーションにとって意味のある変更を記述したプレーンなオブジェクト。アクションはストアにデータを取り込む唯一の方法であるため、UIイベント、ネットワークコールバック、WebSocketsなどのその他のソースからのデータも、最終的にはアクションとしてディスパッチされる必要があります。アクションは実行されるアクションの種類を示すtypeフィールドを持たなければなりません。タイプは定数として定義し、他のモジュールからインポートできます。typeにはSymbolsよりも文字列を使用する方が適切です。文字列はシリアライズ可能(serializable)だからです。type以外のアクションオブジェクトの構造は自由です。関心があれば、アクションの構築方法に関する推奨事項としてFlux Standard Actionを参照してください。

戻り値

(Object^†): The dispatched action (see notes).

注意事項

^† The “vanilla” store implementation you get by calling createStore only supports plain object actions and hands them immediately to the reducer.

ただし、createStoreをapplyMiddlewareでラップすると、ミドルウェアがアクションを異なる方法で解釈し、非同期アクション(async actions)のディスパッチをサポートできます。非同期アクションは通常、Promise、Observable、またはthunkなどの非同期プリミティブです。

ミドルウェアはコミュニティによって作成されており、Reduxにはデフォルトで同梱されていません。使用するには、redux-thunk や redux-promise などのパッケージを明示的にインストールする必要があります。独自のミドルウェアを作成することも可能です。

非同期API呼び出しの記述方法、アクションクリエイター内での現在の状態の読み取り、副作用の実行、処理の連鎖実行については、applyMiddleware の使用例を参照してください。

例

import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))

subscribe(listener)

変更リスナーを追加します。アクションがディスパッチされるたびに呼び出され、状態ツリーの一部が変更される可能性があります。コールバック内で getState() を呼び出して現在の状態ツリーを読み取ることができます。

変更リスナーから dispatch() を呼び出すことも可能ですが、以下の注意点があります：

リスナーはユーザーアクションへの応答、または特定の条件下（例：ストアが特定のフィールドを持つ場合のアクションディスパッチ）でのみ dispatch() を呼び出すべきです。条件なしで dispatch() を呼び出すことは技術的に可能ですが、通常は各 dispatch() 呼び出しが再度リスナーをトリガーするため、無限ループが発生します。
サブスクリプションは各 dispatch() 呼び出し直前にスナップショットされます。リスナー実行中にサブスクライブ/アンサブスクライブしても、現在進行中の dispatch() には影響しません。ただし、次回の dispatch() 呼び出し（ネストされた場合も含む）では、より新しいサブスクリプションリストのスナップショットが使用されます。
リスナーはすべての状態変更を確認できると期待すべきではありません。ネストされた dispatch() 中に状態が複数回更新される可能性があるためです。ただし、dispatch() 開始前に登録されたすべてのサブスクライバーは、終了時点の最新状態で呼び出されることが保証されています。

これは低レベルAPIです。直接使用するよりも、React（または他の）バインディングを使用することが一般的です。状態変更への反応としてコールバックを頻繁に使用する場合は、カスタム observeStore ユーティリティの作成を検討してください。Store は Observable でもあるため、RxJS などのライブラリで変更を subscribe できます。

変更リスナーを解除するには、subscribe が返す関数を呼び出します。

引数

listener (Function): アクションがディスパッチされ、状態ツリーが変更された可能性があるときに呼び出されるコールバック。このコールバック内で現在の状態ツリーを読み取るために getState() を呼び出せます。ストアのリデューサーは純粋関数であると期待できるため、状態ツリーの深いパスへの参照を比較して値が変更されたかどうかを判断できます。

返り値

(Function): 変更リスナーの登録を解除する関数。

例

function select(state) {
  return state.some.deep.property
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())

  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}

const unsubscribe = store.subscribe(handleChange)
unsubscribe()

replaceReducer(nextReducer)

ストアが状態計算に使用するリデューサーを置換します。

これは上級者向けAPIです。アプリでコード分割を実装してリデューサーを動的に読み込みたい場合や、Reduxのホットリロードメカニズムを実装する場合に必要になる可能性があります。

引数

nextReducer (Function): ストアが使用する新しいリデューサー。

ストアメソッド​

getState()​

戻り値​

dispatch(action)​

引数​

戻り値​

注意事項​

例​

subscribe(listener)​

引数​

返り値​

例​

replaceReducer(nextReducer)​

引数​