ストア

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

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

ストアを作成するには、ルートリデューサー関数をRedux ToolkitのconfigureStoreメソッドに渡します。これにより、デフォルト設定が適用されたReduxストアが設定されます。（Redux Toolkitを使用していない場合は、元のcreateStoreメソッドを使用できますが、できるだけ早くコードをRedux Toolkitに移行することをお勧めします）

ストアメソッド

getState()

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

戻り値

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

dispatch(action)

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

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

注意

リデューサーの内側からdispatchを呼び出そうとすると、「リデューサーはアクションをディスパッチできません」というエラーが発生します。リデューサーは純粋関数であり、新しい状態値を返すことだけができ、副作用を持つことはできません（ディスパッチは副作用です）。

Reduxでは、サブスクリプションはルートリデューサーが新しい状態を返した後に呼び出されるため、サブスクリプションリスナー内でディスパッチできます。リデューサー内でディスパッチが許可されないのは、副作用があってはならないためです。アクションに応じて副作用を起こしたい場合は、非同期アクションクリエイター内で処理するのが適切です。

引数

action (オブジェクト^†): アプリケーションにとって意味のある変更を記述するプレーンオブジェクト。アクションはストアにデータを取り込む唯一の方法であるため、UIイベント、ネットワークコールバック、WebSocketなどの他のソースからのデータは、最終的にアクションとしてディスパッチされる必要があります。アクションには、実行されるアクションの種類を示すtypeフィールドが必要です。型は定数として定義し、別のモジュールからインポートできます。typeには、シンボルよりも文字列を使用する方が良いでしょう。文字列はシリアライズ可能だからです。type以外のアクションオブジェクトの構造は、実際にはユーザー次第です。Flux Standard Actionでは、アクションの構築方法に関する推奨事項を確認できます。

戻り値

(オブジェクト^†): ディスパッチされたアクション（注を参照）。

注記

^† [`createStore`](/api/createstore)を呼び出すことで得られる「バニラ」ストアの実装は、プレーンオブジェクトアクションのみをサポートし、それらをすぐにリデューサーに渡します。

ただし、createStoreをapplyMiddlewareでラップすると、ミドルウェアはアクションを異なる方法で解釈し、非同期アクションのディスパッチをサポートできます。非同期アクションは通常、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 (関数): アクションがディスパッチされ、状態ツリーが変更された可能性があるたびに呼び出されるコールバック。このコールバック内でgetState()を呼び出して、現在の状態ツリーを読み取ることができます。ストアのリデューサーは純粋関数であると想定できるため、状態ツリーの深いパスへの参照を比較して、その値が変更されたかどうかを確認できます。

戻り値

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

例

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 (関数) ストアが使用する次のリデューサー。

ストア

ストアメソッド​

getState()​

戻り値​

dispatch(action)​

引数​

戻り値​

注記​

例​

subscribe(listener)​

引数​

戻り値​

例​

replaceReducer(nextReducer)​

引数​

ストアメソッド

getState()

戻り値

dispatch(action)

引数

戻り値

注記

例

subscribe(listener)

引数

戻り値

例

replaceReducer(nextReducer)

引数