問題タブ [redux]

サーバーを webpack dev サーバーを介して実行すると、次のエラーが発生します。

クライアント エントリ ファイルは次のようになります。

すべてがサーバー側で正しくレンダリングされます。問題は、このルーター コードがクライアント側にある場合です。クライアント上で実行されているにもかかわらず、ルーターがサーバーサイズのルーターのように機能しようとしているようです。

私が使用しているバージョンは次のとおりです。

ドキュメントによると、反応アプリの状態はシリアライズ可能なものでなければなりません。じゃあ授業は？

ToDo アプリがあるとします。各Todoアイテムには、これまでのところ などのプロパティがありnameますdate。今、シリアル化できないオブジェクトにメソッドが必要です。つまり、 todoTodo.rename()の名前を変更し、他の多くのことを行います。

私が理解している限り、関数をどこかで宣言し、その関数を小道具を介してコンポーネントにrename(Todo)渡すか、または渡すことができます。this.props.rename(Todo)

どこかで宣言する際に 2 つの問題があり.rename()ます。1) どこで? 減速機で？would be instanceアプリのレデューサーのどこかにすべてのメソッドを見つけるのは難しいでしょう。2) この関数を渡します。本当に？すべての上位レベルのコンポーネントから手動で渡す必要があります。また、メソッドが増えるたびに、大量のボイラープレートを追加して、それを渡すだけですか? または、1 つのタイプのオブジェクトに対して 1 つの名前変更メソッドしか持たないことを常に望んでいます。Todo.rename() Task.rename()ではないEvent.rename()

それはばかげているように思えます。オブジェクトは、それに対して何ができるか、どのようにできるかを知っている必要があります。そうではありませんか？

ここで何が欠けていますか？

私のコンポーネントには次のものがあります。

unsubscribe を呼び出さないと、次のエラーが発生します。

警告: setState(...): マウントされたコンポーネントまたはマウントされたコンポーネントのみを更新できます。これは通常、マウントされていないコンポーネントで setState() を呼び出したことを意味します。これはノーオペレーションです。

私が知りたいのは、割り当てる必要があるか、または割り当てるのunsubscribeにthis適した場所があるかということです。

React with Redux をストアとして使用しています。また、react-redux ライブラリを使用して 2 つを統合しています。私のストアには 2 つのデータ セットが含まれています。

• タスク { ID、名前、担当者 ID }
• ユーザー { ID、名前 }

私は（react-reduxを使用して）TaskListComponentを持っていますconnect-sを使用して私のストアに：

リストにはタスク名またはユーザー名を検索できるフィルターがあるため、両方が必要です。コンポーネントは「ユーザー対応」である必要があります。

このコンポーネントは、タスク名と割り当てられたユーザーの名前を表示する TaskItemComponent という別のコンポーネントを一覧表示します。

タスクの割り当てられたユーザーを解決するための最善の方法を決定するのに苦労しています。

• React のガイドラインによると、Item コンポーネントは Task を prop として受け取り、render 関数で User 自体を解決する必要があります。ただし、これにはコンポーネントがストア対応である必要があり、react-redux ライブラリを使用すると、コンポーネントがストアにアクセスせずにストアにアクセスできるように設計されていないようconnectです。

• または、リスト内の User を解決し、それをタスクとともに Item コンポーネントに渡すこともできます<TaskItemComponent task={task} assignee={resolveTaskAssignee(task)} />。これには、アイテムを「ダム」に保つという利点があり、ストアの変更をリッスンする必要がない (またはストアについて知る必要がない) ことを意味します。

アドバイスをいただければ幸いです。

私は react とreduxの初心者です。

質問: redux で"datasource" (kendo-ui datasourceに類似) を実装する最良の方法は何ですか?

すべてのウィジェット データソースを 1 か所に保存し (データソース リデューサーを作成しました)、データソースをそのウィジェット (テーブル ウィジェット、リストビュー、コンボボックスなど) に「バインド」しようとしました。データソースには独自の API (addFilter、addSort、getFiltered など) が必要であり、適用されたフィルターとデータも保存する必要があります。

すべてのデータソースを redux ストアに保存したい (そのため、データソースを作成し、ウィジェットを作成する前にその作成をディスパッチする必要があります)。

問題は、「スマート」ウィジェットのコンテナー コンポーネントへの react-redux コネクタを作成するときに、小道具を含むデータ ソースを送信する必要がありますが、現時点ではデータ ソースが作成されていないことです。

ダミーの初期データソースを送信すると（ディスパッチなしで作成とデータ入力が行われます）、それをディスパッチして、componentDidMountでデータを入力します-ウィジェットのレンダリング関数が2回呼び出されます

ある種の「ラッパー」機能が必要だと思いますが、今のところその方法がわかりません。

「データソース機能」を実装する方法の例がいくつかあるのではないでしょうか?

Babel トランスパイラーで jspm / system.js を使用すると、コンソールに次のエラーが表示されます。

その行を からコメントアウトするとreact/themes/index.js、（予想どおり）そのエラーは表示されなくなります。

ただし、これはわかります。

これは DevTools に関連しているようです。

これが私がそれらを使用しようとしている方法です。

そして、これが私のpackage.jsonです

設定__DEVTOOLS__ = falseすると、エラーは表示されず、アプリは期待どおりにレンダリングされます。

私はうまく動作するこの webpack の例に基づいて実装しました: https://github.com/emmenko/redux-react-router-async-example

私は何を間違っていますか？

ユニバーサル/同形の JavaScript アプリ (Express/Redux/React) を構築しています。React Router を使用したクライアントでのルーティングおよび/または Express を使用したサーバーでのルーティングを検討しています。

クライアント側のルーティングは、ユーザーとのやり取りがよりシームレスになるため、シングル ページ アプリで一般的になっていることを私は知っています。

ただし、クライアント側とサーバー側のルーティングをよりよく理解しようとしています。アプリケーション (単一ページであるかどうかにかかわらず) を構築するときに誰かが遭遇する可能性がある、クライアント側ルーティングの潜在的な欠点は何ですか? また、サーバーでのルーティングを検討するのに最適な時期はいつでしょうか? 大規模なアプリケーションは一方 (クライアント/サーバー) だけでルーティングしますか、それとも 2 つをブレンドすることがよくありますか?

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

私は、Reduxエコシステムの TodoMVC の例に取り組んでいます。サンプル用の作業コードが完成し、現在、アプリケーションの各要素のテストの作成に取り組んでいます。

アクションとレデューサーのテストは非常に簡単ですが、コンポーネントのテストを書くのはやや難しいことがわかりました。

私の一般的なコンポーネント アーキテクチャは次のようになります。

TodoInput.js の単体テストの作成は比較的簡単です。

TodoInput.js:

TodoInput-test.js:

しかし、TodoItem.js の場合、テストは少し複雑です。

editingアイテムにフラグが設定されているかどうかに基づいて、レンダリング コードが分岐します。

TodoItem.js:

たとえば、コンポーネントをダブルクリックして状態が に正常に設定されたことを確認するテストを作成する方法に少し困惑していますediting: true。

通常、テストは「レンダリング」と「イベント」の 2 つの部分に分けられます。つまり、TodoItem-test.js の場合です。

ただし、この場合、コンポーネントをダブルクリックすると次のようになるかどうかを確認したいと思います。

1. コンポーネントの状態にはediting、それに関連付けられたフラグが必要です
2. これelementは変更されているはずであり、代わりにコンポーネントをTodoItem.jsレンダリングする必要があります。<TodoInput/>

この予想される動作に対してテストを構成する最も効率的な方法は何ですか? 私は次の2つのことを行うべきだと考えています。

最初に、コンポーネントをダブルクリックして予期した"editing: true"フラグが追加されるかどうかをテストします。これを行う方法がわかりません。次のようにテストを設定した場合：

編集フラグが設定されていることを確認するにはどうすればよいですか? liComponent.props.editing戻り値undefined.

次に、context("if the component is editing mode")以下が正しくレンダリングされていることを確認するテストを行います。

また、これを厳密にテストする方法もわかりません。