React Nativeアプリ(Redux)でローカルとクラウドのデータをどのように処理する必要がありますか

アシシュチャウダリー

私はアプリを持っていて、その中にこれらの機能があります:

画面

ホーム{すべてのカテゴリの最近の投稿を表示します(APIは1ページに30件の投稿を提供します)}

カテゴリ{すべてのカテゴリリストを表示}

カテゴリ別{最近の投稿をカテゴリ別に表示(APIは1ページに30件の投稿を提供)}

投稿{コメント付きの投稿の詳細を表示}

ユーザープロファイル{ユーザープロファイルと最近の投稿を表示します(APIは1ページに30件の投稿を提供します)}

プロファイル設定{更新可能なフィールドと更新ボタンを表示}

今、私が混乱しているところ:

  1. 最初にストア全体にAPIを入力する必要がありますか、それとも画面が開いたときに各画面に対してAPI呼び出しを行う必要がありますか?

  2. また、更新の場合、たとえば、ユーザーが投稿を気に入った場合、APIが完了するまでスピナーなどを表示する必要がありますか、それともローカルストアの値をすぐに更新してからAPIを呼び出す必要がありますか?

イドコーエン

これを解決するための多くのアプローチがあります。私のは:

1)同じストアにもアクセスできるAPIリクエストを処理するモデル/マネージャーを作成します。たとえば、画面がマウントされた場合は、Home.Manager.getNextPage();を使用します。また、APIリクエストを処理する方法と、ページングを処理する方法もすでに知っています。

したがって、すべての計算はマネージャーにあります。データを取得すると、ストアを更新します。

2)いいねを含むアプリを作成したときは、ローカルデータも使用しました。私のアプローチは、最後のように最後から10秒の時間を設定することでした。そのため、ユーザーが複数の投稿を気に入った場合に備えて、一括で送信できます。したがって、サーバーは複数のtcp接続を処理する必要はありませんが、複数のいいねデータを持つ接続を処理する必要があります。

ポイントは、最初にローカルに保存し(サーバーを更新する前にユーザーがアプリを強制終了した場合に備えて)、データ配列に追加するなど、新しくなった場合は10秒間待機し、送信しない場合はさらに10秒間待機することでした。サーバーへのデータ。サーバーがデータベースに保存したことを返すまで、このローカルデータをクリーンアップしないでください

このようにして、ユーザーがサーバーからのフィードバックを待たずに、最初にアニメーションを表示できます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

React Reduxルーターでは、ルートの状態にどのようにアクセスする必要がありますか?

分類Dev

reduxを使用する場合、reactコンポーネントで購読解除をどのように処理する必要がありますか?

分類Dev

Reactフルスタックアーキテクチャ:reactフロントエンドをノード/ Expressアプリケーションに追加する場合、reactの状態は一般的にどのような側面を処理しますか?

分類Dev

ReactのcomponentWillUnmountで休暇アニメーションをどのように処理する必要がありますか?

分類Dev

React:React Projectのドロップダウン要素にメディアクエリを設定する必要がありますが、スタイル付きコンポーネントを使用して設定する方法がわかりません

分類Dev

Firebaseとそのアクティブなリスナーを使用している場合、ReactでReduxを使用し、データをローカルに保存する必要はありますか?

分類Dev

React Reduxのエラー:未処理の拒否(エラー):アクションはプレーンオブジェクトである必要があります

分類Dev

エラー:アクションはプレーンオブジェクトである必要があります。非同期アクションにはカスタムミドルウェアを使用します。React-reduxエラー

分類Dev

react-reduxエラー:アクションはプレーンオブジェクトである必要があります。非同期アクションにカスタムミドルウェアを使用する

分類Dev

React / Redux:エラー:アクションはプレーンオブジェクトである必要があります。非同期アクションにカスタムミドルウェアを使用する

分類Dev

React NativeアプリがデバッグまたはJavaScriptコードからのリリースビルドであるかどうかをどのように判断できますか?

分類Dev

子コンポーネントと親コンポーネントの間でデータを渡すことなく、「フェッチ」リクエストをReactアプリのどこに配置する必要がありますか?

分類Dev

ブラウザがreact-reduxアプリケーションをサポートしているかどうか、および/またはロードに失敗したかどうかを検出するにはどうすればよいですか?

分類Dev

Webpack 2:このファイルタイプReactを処理するには、適切なローダーが必要になる場合があります

分類Dev

githubからローカルコンピューターにreactアプリのクローンを作成しましたが、npm startを実行しようとすると、次のエラーが発生します。

分類Dev

React-native:アプリのリロード時に、ユーザーはログイン状態のままである必要があります

分類Dev

Reactアプリ(または任意のSPA)はHATEOASバックエンドとどのように相互作用する必要がありますか?

分類Dev

React with Reduxで、いつデータをバックエンドに保存する必要がありますか

分類Dev

React Nativeで「リモートデバッガーがバックグラウンドタブにあります」という警告を取り除く

分類Dev

アップロードされた画像(画像オブジェクト)をレンダリングしてエラーが発生しないようにするにはどうすればよいですか(オブジェクトはReactの子として有効ではありません)?

分類Dev

パスにデータの種類に関する手がかりが含まれていない場合、React / NextJSはルーティングと画像をどのように処理できますか?

分類Dev

機能コンポーネントと状態を使用して、Reactのドロップダウンリストの各位置にどのように関連付ける必要がありますか

分類Dev

React-Nativeには質問のリストがあり、ページごとに2つの質問をレンダリングする必要があります。それを達成するための最良のアプローチは何ですか?

分類Dev

React JSのどのディレクトリを公開してアクセスできるようにする必要がありますか?

分類Dev

[React-Navigation]警告なしで「ナビゲーションプロップなしでナビゲートする」にはどうすればよいですか?「アプリでは1つのナビゲーターのみを明示的にレンダリングする必要があります...」

分類Dev

React:電話の実際のカメラアプリにアクセスするにはどうすればよいですか(ブラウザーにフィードをロードしないでください)?

分類Dev

ComponentDidMount関数内でデータを読み取れるように、FirebaseリスナーにReact Nativeアプリでデータをredux状態にロードさせるにはどうすればよいですか?

分類Dev

このReactコードは、Reactフックがなく、機能コンポーネントではなくクラスコンポーネントがあるとどのように見えますか?(追加のウィンドウを開くボタン)

分類Dev

データが変更されない場合、Reactコンポーネントで状態を使用することは悪い習慣ですか?代わりに、クラスのプロパティを使用する必要がありますか?

Related 関連記事

  1. 1

    React Reduxルーターでは、ルートの状態にどのようにアクセスする必要がありますか?

  2. 2

    reduxを使用する場合、reactコンポーネントで購読解除をどのように処理する必要がありますか?

  3. 3

    Reactフルスタックアーキテクチャ:reactフロントエンドをノード/ Expressアプリケーションに追加する場合、reactの状態は一般的にどのような側面を処理しますか?

  4. 4

    ReactのcomponentWillUnmountで休暇アニメーションをどのように処理する必要がありますか?

  5. 5

    React:React Projectのドロップダウン要素にメディアクエリを設定する必要がありますが、スタイル付きコンポーネントを使用して設定する方法がわかりません

  6. 6

    Firebaseとそのアクティブなリスナーを使用している場合、ReactでReduxを使用し、データをローカルに保存する必要はありますか?

  7. 7

    React Reduxのエラー:未処理の拒否(エラー):アクションはプレーンオブジェクトである必要があります

  8. 8

    エラー:アクションはプレーンオブジェクトである必要があります。非同期アクションにはカスタムミドルウェアを使用します。React-reduxエラー

  9. 9

    react-reduxエラー:アクションはプレーンオブジェクトである必要があります。非同期アクションにカスタムミドルウェアを使用する

  10. 10

    React / Redux:エラー:アクションはプレーンオブジェクトである必要があります。非同期アクションにカスタムミドルウェアを使用する

  11. 11

    React NativeアプリがデバッグまたはJavaScriptコードからのリリースビルドであるかどうかをどのように判断できますか?

  12. 12

    子コンポーネントと親コンポーネントの間でデータを渡すことなく、「フェッチ」リクエストをReactアプリのどこに配置する必要がありますか?

  13. 13

    ブラウザがreact-reduxアプリケーションをサポートしているかどうか、および/またはロードに失敗したかどうかを検出するにはどうすればよいですか?

  14. 14

    Webpack 2:このファイルタイプReactを処理するには、適切なローダーが必要になる場合があります

  15. 15

    githubからローカルコンピューターにreactアプリのクローンを作成しましたが、npm startを実行しようとすると、次のエラーが発生します。

  16. 16

    React-native:アプリのリロード時に、ユーザーはログイン状態のままである必要があります

  17. 17

    Reactアプリ(または任意のSPA)はHATEOASバックエンドとどのように相互作用する必要がありますか?

  18. 18

    React with Reduxで、いつデータをバックエンドに保存する必要がありますか

  19. 19

    React Nativeで「リモートデバッガーがバックグラウンドタブにあります」という警告を取り除く

  20. 20

    アップロードされた画像(画像オブジェクト)をレンダリングしてエラーが発生しないようにするにはどうすればよいですか(オブジェクトはReactの子として有効ではありません)?

  21. 21

    パスにデータの種類に関する手がかりが含まれていない場合、React / NextJSはルーティングと画像をどのように処理できますか?

  22. 22

    機能コンポーネントと状態を使用して、Reactのドロップダウンリストの各位置にどのように関連付ける必要がありますか

  23. 23

    React-Nativeには質問のリストがあり、ページごとに2つの質問をレンダリングする必要があります。それを達成するための最良のアプローチは何ですか?

  24. 24

    React JSのどのディレクトリを公開してアクセスできるようにする必要がありますか?

  25. 25

    [React-Navigation]警告なしで「ナビゲーションプロップなしでナビゲートする」にはどうすればよいですか?「アプリでは1つのナビゲーターのみを明示的にレンダリングする必要があります...」

  26. 26

    React:電話の実際のカメラアプリにアクセスするにはどうすればよいですか(ブラウザーにフィードをロードしないでください)?

  27. 27

    ComponentDidMount関数内でデータを読み取れるように、FirebaseリスナーにReact Nativeアプリでデータをredux状態にロードさせるにはどうすればよいですか?

  28. 28

    このReactコードは、Reactフックがなく、機能コンポーネントではなくクラスコンポーネントがあるとどのように見えますか?(追加のウィンドウを開くボタン)

  29. 29

    データが変更されない場合、Reactコンポーネントで状態を使用することは悪い習慣ですか?代わりに、クラスのプロパティを使用する必要がありますか?

ホットタグ

アーカイブ