Use asynchronous-select response with redux saga

Question

I am trying to implement an asynchronous answer-select ( Select.Async ). The problem is that we want to make a selection in the redux saga. Therefore, if the user types something, the select action should be launched. The saga then retrieves the record and stores them in the store. It still works. Unfortunately, loadOptions must return a promise or call a callback. Since newly received parameters are distributed with a changing property, I do not see the possibility of using Select.Async together with the saga to invoke asynchronous fetching. Any suggestions?

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

I had a hack where I assigned a callback to a class variable and resolved it on the WillReceiveProps component. This path is ugly and not working properly, so I am looking for the best solution.

thanks

Answer 1

redux-saga designed to handle side effects such as receiving options for react-select asynchronously. This is why you should leave asynchronous stuff up to redux-saga . I never used react-select , but just by looking at the documentation I would solve it like this:

Your component is becoming very simple. Just get value and options from your redux store. optionsRequested - action creator for the OPTIONS_REQUESTED action:

 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) 

The saga definition for the OPTIONS_REQUESTED action that runs onInputChange loads the data with the specified searchTerm from the server and sends the OPTIONS_RECEIVED action to update the reduction store.

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

In other words: Make your Component as clean as possible and handle all side effects / asynchronous calls in redux-saga

I hope this answer was helpful to you.