問題タブ [react-redux]

次のようなコンポーネント階層があるとします。

...そしてこのような店：

コンポーネント階層を小道具としてTodoStatus渡すことなく、ネストされたコンポーネントをストアに接続する良い方法はありますか? idたとえば、子レデューサーで使用できるコンテキストとしてTodo設定できcurrentTodoId = 1ますが、それに代わるものはありますか? おそらく、親コンポーネントがストアを子コンポーネントが見ることができる単一の todo に減らす方法は...?

この時点で、おそらく「なぜ」と尋ねたいと思いますか？TodoListまあ、(todoの配列を操作する) と入れ子になったTodoStatus(単一の todo を操作したい)の間に、いくつかのレベルの厳密にプレゼンテーション用のコンポーネントが存在する可能性があることを考慮してください。todoIdこのような階層を介して下に渡さなければならないのはかなり苦痛です:

この時点で、私はこれが特に React コンテキストの利点であると想像しているので、おそらく Redux 固有のパターンは存在しないでしょうが、間違っていると思います!

チェックボックスをオンにした後、ラインスルーを追加しようとしています。私はreactとreduxを使用しています。アクションとリデューサーが機能します。このラインスルーを追加する方法が必要なだけです。これを実装しようとしたコードを以下で見つけcheckedてtrueください。前もって感謝します。

/actions/items.js

/reducers/items.js

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

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

私は React と Redux の両方にまったく慣れていないため、取り組んでいるケースのベスト プラクティスと技術的な解決策の両方について確信が持てません。ここでは、Dan Abramov によって定義されている「コンポーネント」と「コンテナー」を使用しています。

私が取り組んでいるコンポーネントは、フィルター コンポーネントの小さなコレクションです。1 つの入力テキスト フィールドと 2 つのボタンで、すべてエンティティのリストをフィルター処理します。私は2つのアプローチを試しました：

最初のアプローチ: 2 つのタイプのコンテナーの 3 つのインスタンスを含む単一のコンポーネント (対応するコンポーネントに接続されたコンテナー)。

最初に作ったのはこれでした。ここで、ルート コンポーネントは次のようになります。

ここで参照されている 2 つのコンテナーは、接続されたコンポーネントと同様に、ほとんど予想どおりに見えます。例として FilterLink を示します。

対応する FilterButton コンポーネント:

このアプローチは機能しますが、2 つの異なるコンテナーを作成する必要はないと考えています。それが再び私を2回目の試みに導きました。

2 番目のアプローチ: 複数のコンポーネントを含む単一のコンテナー。

ここでは、より大きなコンテナを作成しました。

ここでは、コンポーネント全体のすべての状態相互作用が 1 つのコンポーネントにまとめられています。ここでのコンポーネントは、最初のアプローチと同じです。ただし、これは実際には機能しません。ownProps は mapStateToProps と mapDispathToProps の両方で空です。react-redux 接続の仕組みを誤解している可能性があります。

これらのことを考えると、2 つの質問があります。コンテナーとコンポーネントの観点から、このコンポーネントを構造化する最良の方法は何ですか? 次に、2 番目のアプローチで ownProps が最初のアプローチと同様に機能しないのはなぜですか?

お時間をいただきありがとうございます。

アプリケーションでreactjs、react-router、reduxを使用しています。私は非同期アクションを使用しています。以下は私のaction.jsコードです

以下は私のstore.jsコードです

以下は私の reducer.js コードです

アクションをディスパッチするたびに、ブラウザーコンソールに次のエラーが表示されます

警告: [react-router] 「ルーター ルート」は変更できません。それは無視されます

これを「react-router-redux」で解決しようとしましたが、解決しません。

私はここで頭を悩ませています。私は2つのアプリを持っています。それらは別個のツールです。しかし、ツール 1 の 1 つはツール 2 の一部を使用しています。どういうわけかそれらをバインドできるようにするミドルウェアはありますか?

TOOL APP1 --- 独自の redux ストアがあります TOOL APP2 --- 独自の redux ストアがあります

APP1 には APP2 からの動作が必要です。したがって、新しいバージョンを「構築」する代わりに、APP2 のサブセクションをインポートして使用するだけです。APP1 は、APP2 サブコンポーネントに格納されている状態を設定および取得する方法を知る必要があります....

reduxがこれを行うための方法論はありますか?

さらに悪いことに、APP2サブコンポーネントの状態をlocalStorageまたはredisなどに保存できると思います..そして、それでAPP1をハイドレートできます..しかし....