React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス

トレーニングのための一連のプロジェクト
反応+ts
内容は少ないですが、フックのカプセル化、ts ジェネリックの理解、次のレベルのプロジェクト コードの使用など、退屈な内容がたくさんあります。https://gitee.com/fine509/react_jiar

レンダリング

これらは3つのメインページといくつかの細かい詳細です

等

注目すべき点がいくつかあります（一般的な機能についてのみ説明しており、具体的な使用方法については説明していません）

ページのどこかにエラーがある場合にハングアップするのではなく、エラー境界処理と getDerivedStateFromError を使用してエラー コンポーネントを表示します。

useSearchParamsの使用

この API はここでパラメータを取得および設定できます。

react-queryの使用

このライブラリは、サーバー側のデータを管理するための状態管理ライブラリとしてオンラインで紹介されています。 redux に少し似ているようですが、多くのアクションとリデューサーを書く必要はありません。 非同期リクエストをサポートし、キーを使用してデータを一意に識別し、グローバル状態管理ライブラリに似た場所を持っています。これは、追加、削除、変更、チェックなどの特定のテーブルに特に適しており、楽観的更新もサポートしています。 例えば、データの追加、削除、変更、チェックを行う際に、データを送信した瞬間に元のデータを直接取得できるという考え方です。自分で記述したロジックコードを通じて、追加、削除、変更、チェックを行った後のデータを取得し、それを直接ページにレンダリングすることができます。直接更新されたように見えますが、実際には最初にレンダリングされ、その後バックグラウンドでリクエスト自体が送信されます。失敗した場合は、元のデータを取得してページに再レンダリングし、失敗を通知することもできます。 このプロジェクトを実行する際に特に気になった最後の点は、データ管理でした。

まず、フックを自分でカプセル化しました。

私の考えでは、ページは大量のデータを取得する必要がある可能性があるため、自分で Loading を書くのは非常に面倒です。複数あるのに、なぜ loading を統一的に管理できないのでしょうか? 次に、データをオブジェクトとして設定します。それを使用するときは、データのタイプを定義するために型を渡すことができます。

次にsendHttpを使ってデータを送信します

2 つのパラメータを受け入れます。2 番目のパラメータは、現在のデータが配置されるデータの属性です。

使用効果は

こうすることで、このデータの状態を一元的に管理できるのですが、後になって、これが非常に使いにくいことに気づきました。それでまた諦めました。ネイティブで書くほうが楽です。インターフェースを直接定義するだけです。

直接使用

もちろん、redux を使うことも考えましたが、redux ではアクションとリデューサーを書く必要があり、これも非常に面倒です。
最近友人から、Ahooks の usequest も良いと聞いたので、次のプロジェクトで試してみようと思います。

最後に、このプロジェクトから最も学んだことは、さまざまなフックをカプセル化することです

カプセル化redux

カプセル化リクエスト

TSの研究もあります。

API がわからない場合は、型定義をクリックしてください。

このようなことが分からない場合は、クリックして一つずつクリックしてください。

この集中講義で、ジェネリック医薬品の使い方をゆっくりと理解できるようになります。

react+ts を使用したシンプルな jira プロジェクトの実装に関するこの記事はこれで終わりです。さらに関連性の高い react+ts jira プロジェクトのコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。