作成者が動作中の Redux ストアの状態にアクセスする方法: 直接か Redux サンクか?

Action Creator での Redux ストア状態へのアクセス

Redux でアクションを作成する場合、グローバル ストア状態にアクセスする必要が生じる場合があります。この記事では、これを実現するための 2 つのアプローチについて説明します。インポートされたストア変数を介して状態に直接アクセスする方法と、Redux Thunk ミドルウェアを利用する方法です。

状態に直接アクセスする

<code class="javascript">import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}</code>

このアプローチは、ストアがモジュールからエクスポートされたシングルトンであることに依存します。技術的には機能しますが、リクエストごとに個別のストアが必要になるサーバー側のレンダリングが複雑になるため、お勧めできません。

Redux Thunk の使用

<code class="javascript">export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}</code>

Redux の使用サンク ミドルウェアを使用すると、getState 関数を介してストア状態にアクセスできます。このアプローチは、クライアント環境とサーバー環境の両方でシームレスに動作するため、推奨されます。

考慮事項

アクション作成者での getState の使用については、さまざまな意見があります。キャッシュされたデータがチェックされるか、認証ステータスが検証されるシナリオに限定されるべきだと主張する人もいます。サンクで getState を使用することは許容されると主張する人もいます。

最終的に、最良のアプローチはアプリケーションの特定のニーズによって異なります。アクションは簡潔であることが理想ですが、アクション作成者で状態に直接アクセスすることが正当化される場合もあります。

以上が作成者が動作中の Redux ストアの状態にアクセスする方法: 直接か Redux サンクか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。