問題タブ [redux-thunk]

ユーザーに関するデータを取得するために API をクエリして、React/Redux アプリを構築しています。

ここでチュートリアルを再利用しようとしています: https://rackt.org/redux/docs/advanced/ExampleRedditAPI.html

特定のユーザーの情報を表示するコンテナー コンポーネント UserPage があるとします。

現在のユーザーを取得するために、API 呼び出しを行います。 GET /api/users/:userId

私の問題は、コンポーネントを初期化するときに、プロパティ user が必ずしも存在しないことです。

そのため、エラーが表示されますcan't call property name on undefined。

コンポーネントの初期状態をどのように処理しますか? componentWillReceivePropsUI の更新に依存していますか? プロパティを使用していisFetchingますか？

ありがとうございました！

現在、reduxおよびredux-thunkミドルウェアを使用しています。

アクションのディスパッチに関するコントロールに関しては、次のようになります。

• ユーザーはこのアクションに十分な権限を持っていますか?
• ユーザーに自分のアクションを確認するよう促します (破壊的なアクションの場合)

このようなコントロールを非同期アクション ( thunk ) 内に配置するのが良いと思います。理由は次のとおりです。

• それは私のコードをDRYerに保ちます（多くのコンポーネント/ビューがアクションをトリガーする可能性がありますが、そのアクションにはactionCreatorが1つしかありません）
• アプリで「何かが起こる」前の最後のポイントです。そのようなコントロールを行うための戦略的な場所のように感じさせる.

質問）

1. 他の redux ユーザーからのフィードバックを探しています。私はこの決定にかなり自信を持っていますが、フィードバックがほとんどない (そしてジュニア開発者である) ため、疑問を感じます。これは、 redux を使用する場合に承認制御を行う正しい方法 ですか?

2. 認可コントローラーを ミドルウェアにするのはどうでしょうか。すべての actionCreator で認証コントロールを複製するのではなく、単一の場所に認証コントロールを保持します。
   編集 この可能性を深く掘り下げると、ミドルウェアは当初(dispatch, getState)、認証ミドルウェアがどのアクションがディスパッチされているか (またはどの actionCreator が使用されているか) を「知る」必要があるという意味しか受け取らないため、すぐに困難になりました。最終的に信頼できないことが判明しました。

その他のポイント

• はい、これはクライアント側です。はい、サーバー側のチェックも行っています。
• これらのタイプのコントロールをストア/リデューサーに配置してはならないことを知っています。彼らは純粋である必要があります。

私はいくつかの他のコンポーネントからアクションをディスパッチしており、ストアはsvgArrプロパティで更新されていますが、次のステートレス コンポーネントconnect'edがストアに追加されていますが、ストアが変更されたときに更新されませんsvgArr。

それはステートレスコンポーネントであるため、どのように動作すると思われますか? それとも私は何か間違っていますか？

NASAのデイサービスの写真（ https://api.nasa.gov/api.html#apod ）から投稿された写真を表示する簡単なアプリを構築しようとしています。現在、キープレスを監視し、キープレスが左、上、右、または下であることに基づいて、日付 ​​(および非同期的に画像) を変更します。これらは、対応して、週または日で表される日付を変更します (一度に 1 マスずつカレンダーを移動することを想像してください)。

私が問題を抱えているのはこれです:次の潜在的な日付を取得するために非同期アクションクリエーターを作成しましたが、アプリケーションの現在の状態と新しい日付を取得するためのキープレスを知る必要があります。これをアクション作成者にカプセル化する方法はありますか? または、アクション作成者がアプリケーションの状態を認識しないように、エクスポートされたアクション作成者が呼び出されるアプリケーションの状態をアプリケーションに配置する必要がありますか? componentDidMountトップレベルの keydown 関数をバインドすることでこれを実行しようとしましたComponentが、アプリケーション ストアへのバインドはレデューサーで発生する変更を反映していないようです。

redux-thunk ミドルウェアと q に依存する非同期ロジック:

ここに、gridAppState へのトップ レベルのバインディングと、関連する可能性があるトップ レベルで発生するその他のものがありますが、私にはよくわかりません。

正しく変更された日付オブジェクトがレデューサーに到達していることを確認しましたが、gridAppState はロードされた最初の日付でスタックしているようです。

イベント ハンドラと現在のアプリケーション状態のアタッチに依存する redux で非同期ロジックにアプローチする正しい方法は何ですか? 3つすべてを行う正しい方法はありますか？

私は React アプリを持っています。Redux を使用してオンライン サービス (非同期) に対して (学習するために) ajax 呼び出しを行う必要があります。

これは私の店です:

これはアクションです：

そして、これはリデューサーです：

私は自分が間違っていることを理解していません。アクションはコンポーネントから完全に呼び出されています。しかし、その後、次のエラーが発生します。

エラー: アクションはプレーン オブジェクトでなければなりません。非同期アクションにはカスタム ミドルウェアを使用します。

私は間違った反応サンクミドルウェアを使用していると思います。私は何を間違っていますか？

編集

アクションはレデューサーを呼び出していますが、レデューサーは状態を変更した後、render メソッドを再実行していません。

redux-thunk を使用していて、いくつかの制限が見え始めています。

PUSHER_CONNECT、PUSHER_CONNECTED、PUSHER_DISCONNECTED、PUSHER_LISTEN_TO_CHANNEL、などのアクションがあるPUSHER_MESSAGE_RECEIVEDとします。状態には、接続ステータスを示す単純なものがあります。

プッシャー接続がまだどこかに存在しているため、これら2: の間を実際に行き来するにはどうすればよいでしょうか。プッシャーオブジェクトと関連オブジェクトをそのままの状態に保ち、 の場合はに設定することを考えていました。しかし、それらのオブジェクトが不変であるという保証はありません。PUSHER_CONNECTEDPUSHER_DISCONNECTEDPUSHER_DISCONNECTEDnull

もう 1 つの考えは、次のチェックを追加することです。新しいメッセージをプッシュしないPUSHER_MESSAGE_RECEIVED場合state.connection !== 'connected'...「実際の」切断であることをシミュレートします。同様に、 のチェックを追加しPUSHER_CONNECTます。プッシャー オブジェクトがそこにあり、接続されている場合は、再接続せず、状態を次のように変更します。{connection: 'connecting'}

これにどのようにアプローチしますか？