問題タブ [react-redux]

私はゆっくりと React を学び、Redux で実装することも学んでいます。しかし、私は障害物にぶつかったようです。これが私がこれまでに持っているものです。

/index.jsx

/actions/items.js

/reducers/reducer.js

/reducers/index.js
更新:

/コンポーネント/Item.jsx

/コンポーネント/Items.jsx

これもやってみた

アップデート：

多くの試行の後、Gitter の @hedgerh は、代わりに state.items にする必要があると指摘しました。だから解決策は

@aziumにもクレジット。

/コンポーネント/App.jsx

正しく実装するために、ここで何が欠けていますか? 今のところ、それを言って壊れていUncaught TypeError: Cannot read property 'map' of undefinedますItems.jsx。正しく接続されていないように見えるので、それは理にかなっていると思います。これはアプリの最初の部分で、2 番目の部分ではユーザーが多くのリストを作成できるようになり、これらのリストには多くのアイテムが含まれます。ほぼ同じことを行うItem.jsxため、おそらく からメソッドを抽出する必要があります。List.jsxありがとう

サーバーからアプリのレンダリングを取得しようとしているので、ここから ServerRendering の例を実装しようとしていました: http://redux.js.org/docs/recipes/ServerRendering.html

server.js を正常に実行できますが、localhost をロードすると、「Uncaught SyntaxError: Unexpected token <」というエラー @ bundle.js:2 が表示されます。renderFullPage() 関数に関係していると思います：

行を削除する<script src="/dist/bundle.js"></script>とエラーはなくなりますが、カウンターは機能しません。

エラーが参照する bundle.js は次のとおりです。

bundle.js

私の dist フォルダで bundle.js を参照しているはずですが、何らかの理由でそうではありませんか? index.html ファイルを renderFullPage が返すものとまったく同じにすると${html}、 <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

その後、カウンターは正常に動作します。サーバー側のレンダリングを行うと、クライアントが bundle.js コードを見つけることができないように見えるため、サーバーから受け取ったものとまったく同じコードを持つコードを作成するため、html に実行されるときにエラーが発生します。それはjavascriptを期待しています。

API 呼び出しから返された結果で 1 つの配列項目を取得するのに問題があります。

これがアクションの機能です。

私の減速機

私は2つの結果を期待しているfollow_check_list : action.resultので、私の状態では見る必要があります

しかし、代わりに次のように表示されます。

私のコンポーネントを更新します。arrayIds には 2 つの項目があります。

よろしくお願いします

React、Redux、Thunk を組み合わせて使用​​すると、次のようになります。

アクション.js

reducer.js

上記の 2 つのスニペットはうまく収まり、Redux の意図に沿っているように感じます。コンテナーにヒットする前に、応答で返されるフィールドにいくつかの変更を加えたいと思います。

たとえば、応答は次のようになります。

そして、私はそれを次のように変更したいと思います(簡単にするための簡単な例):

これまでの研究

オプション 1 Redux の非同期の例を見ると、ここで応答に軽いタッチがあることがわかります: https://github.com/reactjs/redux/blob/master/examples/async/actions/index.js#L33

オプション 2 他の Stackoverflow の質問を見ると、リデューサーは状態を変更するものであるべきなので、それをアクションから除外する方が理にかなっていると思います (しかし、これは実際には状態としてカウントされないのでしょうか?): Redux - データを準備する場所

オプション 3 これはミドルウェアの仕事であるという傾向があります。それが normalizr の処理方法ですが、非パッシブなミドルウェアの例が見つかりません。ミドルウェアがここにある場合、ミドルウェアはある種の SET_STATE アクションをディスパッチする必要がありますか、それともミドルウェアで状態を自由に更新できますか?

編集

次のようないくつかのミドルウェアで実験しました。

それはうまくいくようです - これは本当にミドルウェアの意図ですか? 元の質問が保持されます-理想的な場所はどこですか?

私はかなり大規模なアプリケーションに取り組んでおり、あなたからいくつかの提案をいただければ幸いです。アプリケーションラッパーがreact-redux <Provider>あり、サブアプリケーションのリストがあります。

サブアプリはかなり複雑で、一部のコンポーネントをコンテナーとして使用すると便利なので、 と を使用mapStateToPropsしmapDispatchToPropsます。ただし、はルート オブジェクトであり、 の現在のサブアプリのインデックスが何であるかがわからないmapStateToPropsため、使用できません。storeappState

将来的には、これらのサブアプリを分離して、独自の Web ワーカー スレッドに入れる予定です。この場合、複数のストアを使用してメイン スレッドにストアを送信し、それをメイン ストアの一部として使用しても問題ないでしょうか。

この状況をどう処理するかというアプローチはたくさんありますが、基本的にはサブアプリケーションのようなものをreduxフレームワークでどう処理するかが問題です。おそらく、あなたの何人かは同様の問題に直面したか、最善の方法で解決する方法を知っているだけです.

私はReactを初めて使用し、ルートがgetComponentでロードされているときに「ロード中...」画面をレンダリングする方法を理解できません。getComponent 呼び出しは正常に機能し、コンポーネントが表示されますが、UI には要求と応答の間で何かが起こっているという兆候はありません。それが私が理解しようとしているものです。

onEnter を使用して、または getComponent 関数内で「読み込み中」コンポーネントを強制的に表示しようとして失敗した後、Redux を使用して読み込み状態を true/false に設定し、メイン ビュー コンポーネントに読み込み画面を表示させる必要があるのではないかと考えました。

アクションを使用して読み込み状態を手動で設定すると、これが機能するようです。これは、私が探していたものです。しかし（そして、これは本当の初心者の質問になると思います）ルーター内からストア/ディスパッチャーにアクセスする方法がわかりません。

間違った検索用語を使用しているかどうかはわかりませんが、完全にアイデアがなく、react-router/redux のすべてのチュートリアルは、よくある問題であると思われるものをスキップしているようです。

誰かが私を正しい方向に向けることができますか?

編集：これをもう少し明確にしてみます。最初のコード ブロックでは、要素をクリックする<Link to="/about">と getComponent 関数が起動し、About.jsx コンポーネントが遅延ロードされることがわかります。私が抱えている問題は、リンクをクリックした直後に表示されるある種の読み込みインジケーター/スピナーを表示し、コンポーネントが読み込まれると置き換えられる方法がわからないことです。

詳細編集：非同期ルートをロードするためのラッパーコンポーネントを作成しようとしましたが、うまくいくように見えますが、本当にハッキリしていて、これを行う正しい方法ではないと確信しています. Routes コードは次のようになります。

AsyncRoute.jsx ページは次のようになります。

誰かがより良いアイデアを持っている場合は、私に知らせてください。