Action Creators 内で Redux 状態にアクセスするにはどうすればよいですか?

アクション作成者による Redux 状態へのアクセス

Redux アクションは通常、「薄い」ように設計されており、アプリケーションの更新に必要な情報のみが含まれています州。ただし、シナリオによっては、アクション クリエーター内のグローバル ストア状態にアクセスする必要がある場合があります。この記事では、そのための 2 つのアプローチを検討し、その使用法に関するガイダンスを提供します。

シングルトン ストアの使用

1 つのアプローチには、シングルトン ストアをインポートし、その状態に直接アクセスすることが含まれます。

import store from '../store';

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

このアプローチは実装が簡単ですが、ストアがシングルトンであり、モジュール インポートとして公開されることに大きく依存します。この設計は、サーバー レンダリングの実装を妨げるため、推奨されません。通常、リクエストごとに個別のストア インスタンスが必要です。

Redux Thunk Middleware の使用

推奨されるアプローチは次のとおりです。 Redux Thunk ミドルウェアを活用します。サンク ミドルウェアを使用すると、非同期関数をアクションとしてディスパッチし、getState() メソッドへのアクセスを提供できます。

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

    dispatch(anotherAction(items));
  }
}

このアプローチでは Redux Thunk を使用する必要がありますが、両方のクライアントでストア状態に柔軟にアクセスできます。

考慮事項

アクションクリエイターでの getState() の使用は、Redux コミュニティで議論されています。これに反対する開発者もいますが、条件付きディスパッチやキャッシュ データへのアクセスなどの特定のシナリオでは許容されると考える開発者もいます。

最終的に、最適なアプローチは特定のアプリケーション要件によって異なります。アクション クリエーター内でストア状態へのアクセスが必要な場合は、シングルトン ストアまたはサンク ミドルウェア オプションのいずれかを検討できます。ただし、明確さと追跡可能性を維持するために、アクションは通常「薄く」保つ必要があることに注意することが重要です。

以上がAction Creators 内で Redux 状態にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。