アプリを壊さずにコードの ines を Redux Store 内だけで置き換えた方法!

Redux ストアを扱う開発者に共通するパターンを観察しました。新しい、しかしわずかに異なる要件に直面すると、新しい機能を作成し、一般的な定型コードを書き直すことがよくあります。これには、リデューサー、サンク、アクション、ミドルウェアが含まれます。これにより、コードベース全体で大幅な繰り返しが発生する可能性があります。

標準化とチームのベストプラクティスは通常、チームリーダーによって行われるため、これについて開発者を完全に責めることはできません。

しかし、API やマイクロサービスが標準化され、削除、作成、配置、フェッチなどのエンドポイントが予測可能な構造に従うと、Redux リデューサーとアクションを動的に生成できる高次関数を作成することが可能になります。これにより冗長性が削減され、よりスケーラブルなアーキテクチャが促進されます。これを実装する方法の例を次に示します。

https://gist.github.com/ARAldhafeeri/1ad10710bee110b9a88013984272fbbd

これは 200 行のコードで、使用例は次のとおりです。

1. 動的 Redux スライス作成: 関数 createEntitySlice はエンティティ (予約やユーザーなど) の Redux スライスを生成し、開発者が最小限の定型コードで任意のエンティティのデータを簡単に作成、読み取り、更新、削除できるようにします。
2. カスタマイズ可能なパラメータ: この関数は、entityName、endpoints、extraReducers、extraThunks、extraActions などのカスタマイズ可能なパラメータを受け入れ、さまざまなエンティティや特定の要件に柔軟に対応できます。
3. ベース CRUD サンク: 提供されたエンドポイントに基づいて API と対話する、フェッチ、作成、更新、削除、検索などの一般的な操作に基本の非同期サンクを提供します。これらのサンクは、必要な API 呼び出しを管理し、エラーを処理します。
4. 状態管理のためのリデューサー: スライスには、ロード状態の管理、フェッチされたデータの保存、エラーの処理、および状態の検索やリセットなどのアクションの実行のためのリデューサーが含まれています。
5. ミドルウェアの統合: このコードは、CRUD 操作の結果に基づいて成功またはエラー メッセージを表示するなどの副作用を処理するために、リスナー ミドルウェアを統合します。また、特定の条件が満たされたときに追加のアクションをトリガーするなど、状態変化の動作をカスタマイズする機能を備えたミドルウェアも強化されています。
6. 最適化されたコードの再利用性: この高階関数のアプローチを使用すると、開発者は反復的なボイラープレート コードを回避し、アクションやリデューサーを毎回手動で書き出すことなく、さまざまなエンティティに対して再利用可能な動的なスライスを作成できます。
7. 拡張可能でモジュール式: 高階関数は、機能の redux ストアから必要な機能を生成します。また、リデューサーから初期状態までその中のすべてを拡張できるため、カスタム エンドポイントが到着しても、それは拡張されません。私たちが作成した汎用ベースに完全に追加すれば、それを追加するだけです。

最高です、

アーメド、

以上がアプリを壊さずにコードの ines を Redux Store 内だけで置き換えた方法!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。