Redux-ストア

ストアは、Reduxの不変オブジェクトツリーです。ストアは、アプリケーションの状態を保持する状態コンテナーです。 Reduxは、アプリケーション内に1つのストアのみを持つことができます。 Reduxでストアが作成されるたびに、リデューサーを指定する必要があります。

Reduxの createStore メソッドを使用してストアを作成する方法を見てみましょう。以下に示すように、ストア作成プロセスをサポートするReduxライブラリからcreateStoreパッケージをインポートする必要があります-

import { createStore } from 'redux';
import reducer from './reducers/reducer'
const store = createStore(reducer);

createStore関数には3つの引数を指定できます。以下は構文です-

createStore(reducer, [preloadedState], [enhancer])

レデューサーは、アプリの次の状態を返す関数です。 preloadedStateはオプションの引数であり、アプリの初期状態です。エンハンサーもオプションの引数です。サードパーティの機能を使用してストアを強化するのに役立ちます。

ストアには、以下の3つの重要な方法があります-

getState

Reduxストアの現在の状態を取得するのに役立ちます。

getStateの構文は次のとおりです-

store.getState()

アプリケーションの状態を変更するアクションをディスパッチできます。

ディスパッチの構文は次のとおりです-

store.dispatch({type:'ITEMS_REQUEST'})

アクションがディスパッチされたときにReduxストアが呼び出すコールバックを登録するのに役立ちます。 Reduxの状態が更新されるとすぐに、ビューは自動的に再レンダリングされます。

ディスパッチの構文は次のとおりです-

store.subscribe(()=>{ console.log(store.getState());})

サブスクライブ関数は、リスナーをサブスクライブ解除するための関数を返すことに注意してください。リスナーの購読を解除するには、次のコードを使用できます-

const unsubscribe = store.subscribe(()=>{console.log(store.getState());});
unsubscribe();