ReduxでダムコンポーネントからAPIコールを呼び出す

Question

私はreactとreduxでドロップダウンを実装したいと思います。ドロップダウンは他のコンポーネントの一部になるので、実際には "ダム"コンポーネントになります。しかし、ドロップダウンはAPIを呼び出してアイテムを取得し、カスタムフィルタなどを適用する必要があります.API呼び出しは認証され、トークンはグローバル状態に保存されます。トークンをコンポーネントの小道具に渡す必要がありますか？それとももっと良い方法がありますか？

Answer 1

dumbコンポーネントは、定義上、ダムでなければなりません。つまり、「上から」、すなわち、小道具を介して必要なものすべてを取るべきことを意味します。

新しい（非同期）アクションを使用してデータをフェッチすることで、階層の上にある "Smart"（Reduxに接続された）コンポーネントのみが処理され、APIコールが戻ったときの状態が変更されます。ダムコンポーネントを新しい小道具で再レンダリングします。

だから、Reduxの中で：（実際にあなたの「状態」の一部である）あなたのAPIからの値の1、他の1と呼ばれる機能：

• あなたのダムの成分は2つの小道具を取りますあなたのドロップダウン選択項目の変更。 <MyDumbComponent data={this.props.data} onChange={this.onChange.bind(this)} />
• 次に「スマート」コンポーネントまでの階層は、そののonChange関数に耳を傾け、そして（非同期）アクションAPIを呼び出します
• アクション（FETCH_DATA）を派遣し、データを受信したときに、（別のアクションを呼び出しますデータ
• とFETCH_DATA_SUCCESS）次にReduxのは、減速して、現在の状態から、その新しい小道具（新データ）を使用してコンポーネントを再レンダリングするアクションペイロード
• からその状態を更新します。

あなたがこの参照することもできます。http://redux.js.org/docs/basics/UsageWithReact.html

そしてに関する非同期アクションを：http://redux.js.org/docs/advanced/AsyncActions.html

Answer 2

ダムコンポーネントがアップデートをフェッチようにそれが何かを行うことができますという意味ではありません、それはそれはに「ダム」だ意味あなたの店やあなたが使っているライブラリについて何も知りません。メリットは、磁束の実装を変更できることと、スマートコンポーネントを更新するための作業が少ししかないことです。

あなたが記述しているシナリオのタイプについては、<Menu>がデータを更新したいときに実行する小道具を介して<Menu>に機能を与えます。 <Menu>はReduxについて何も知らない - それは関数を実行しているだけだが、それでも新しいデータを取得できる。複雑さに応じて、生のアクションクリエイター（dispatchActionにバインドされている）を通過させ、それを実行させることができます。

import * as dataActions from './actions'; 
// We have dataActions.fetchItems() which is the action creater to get new items. 

// Attach items, and the action creator (bound to dispatch) to props 
@connect((store) => { 
    return {items: store.data.items} 
}, dataActions) 
class ItemsPage extends Component { 
    static propTypes = { 
     items: PropTypes.object, // the items from the store, from @connect 
     fetchItems: PropTypes.func // action dispatcher, from @connect 
    } 

    render() { 
     return (<Menu onChange={this.props.fetchItems} />) 
    } 
} 

// Our 'dumb' component that doesnt know anything about Redux, 
// but is still able to update data (via its smart parent) 
class Menu extends Component { 
    static propTypes = { 
     onChange: PropTypes.func // same as fetchItems 
    } 

    render() { 
     return (<button onClick={this.props.onChange}>Update items</button>); 
    } 
}