使用して、非同期反応選択Reduxの-佐賀

Question

と私は非同期が反応選択（Select.Async）を実装してみてください。問題は、redux-sagaでフェッチを行いたいということです。したがって、ユーザーが何かを入力した場合は、fetch-actionがトリガーされます。 Sagaはレコードを取り出してストアに保存します。これまでのところ動作します。 残念ながら、loadOptionsは約束を返さなければならないか、コールバックを呼び出す必要があります。新たに取得したオプションを変更するプロパティで伝播しますので、私は非同期コールを取得するために行うサガと一緒Select.Asyncを使用する方法を参照してくださいません。助言がありますか？

<Select.Async 
    multi={false} 
    value={this.props.value} 
    onChange={this.onChange} 
    loadOptions={(searchTerm) => this.props.options.load(searchTerm)} 
    /> 

私はクラス変数にコールバックを割り当て、componentWillReceivePropsで解決するハックがありました。その方法は醜いので、私はより良い解決策を探して正しく動作しませんでした。

おかげ

Answer 1

redux-sagaは非同期react-selectのオプションを受け取るような副作用を処理するためのものです。だから、非同期のものをredux-sagaに残すべきです。私はreact-selectを使用したことがありませんが、ただのドキュメントを見て、私はそれをこのように解決するだろう：

あなたのコンポーネントは非常に単純な取得します。ただあなたのredux店からvalueとoptionsを取得してください。 optionsRequestedがOPTIONS_REQUESTEDアクションのアクションの作成者である：

const ConnectedSelect = ({ value, options, optionsRequested }) => (
    <Select 
    value={value} 
    options={options} 
    onInputChange={optionsRequested} 
    /> 
) 

export default connect(store => ({ 
    value: selectors.getValue(store), 
    options: selectors.getOptions(store), 
}), { 
    optionsRequested: actions.optionsRequested, 
})(ConnectedSelect) 

onInputChangeによってtriggedさOPTIONS_REQUESTEDアクションの佐賀定義時計、サーバからのsearchTermでデータをロードし、Reduxのストアを更新するOPTIONS_RECEIVEDアクションをディスパッチします。言い換えれば

function* watchLoadOptions(searchTerm) { 
    const options = yield call(api.getOptions, searchTerm) 
    yield put(optionsReceived(options)) 
} 

は：可能な限り純粋なコンポーネントを作成し、私はこの答えはあなたのために有用であった期待しredux-saga

内のすべての副作用/非同期呼び出しを処理します。