コンポーネントを構成する方法

Question

私はちょうど反応を学び始めています。私はテストプロジェクトの一つを構成する最善の方法を考えています。

アプリケーションは、1つのページで、にあります。

• はJSONを返す、外部APIを打つ検索を持っています。
• JSON結果が読める形式
• にユーザーに表示されますが、ダイナミックリンク
• とボタンがあり、私はそこにあるべきと思っていJSONデータの一部

とドロップダウンを持っていますそれから直接継承する他の成分の各々と、「検索」の親コンポーネントであるとしてアソシエーションのセットアップとのそれらのそれぞれのためのコンポーネント、..例えば

：

app 
│   ├── search component 
│   │   ├── dropdown component 
│   │   ├── list component 
│   │   ├── button component 
│   │   

これは間違ったアプローチのように感じます。私は州の管理のためのreduxを見ていたが、それはあまりにも残酷だったと思った。私は各コンポーネントの検索データにアクセスする必要があるので、これを可能にするより良い方法がありますか？ありがとう

Answer 1

コンポーネントの設計は、作成しようとしているアプリケーションに適しているようです。 Reduxは実際には、あなたのケースでは、apiからのデータがシンプルであり、状態が親コンポーネントによって管理できるという条件では、過剰なものになるでしょう。先にあなたのパスの

いくつかのポインタ：

1. はJSONデータを取得し、部品のstateにそれを保存するためにあなたのSearchコンポーネントのcomponentDidMountでAPIを呼び出します。
2. コンポーネントに表示されるLoadingコンポーネントを作成します.API呼び出しが完了すると（stateにはデータがありません）、コンポーネントが表示されます。
3. stateのSearchのjsonデータを子コンポーネントにpropsとして渡します。子供に関連するstateの部分だけを渡してください。
4. イベント（ボタンonClick、ドロップダウン・オン・チェンジなど）によるデータの変更を処理するために、Searchコンポーネントから子へのアクションを渡すこれらのアクションは、Searchコンポーネントのstateを変更し、その変更を子に渡します小道具を介してコンポーネント。

希望します。