Use async react-select with redux-saga
redux-saga
is for handling side effects like asynchronously receiving options for react-select
. That's why you should leave the async stuff to redux-saga
. I have never used react-select
but by just looking at the documentation I would solve it this way:
Your component gets very simple. Just get value
and options
from your redux store. optionsRequested
is an 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)
A saga definition watches for OPTIONS_REQUESTED
action that is trigged by onInputChange
, loads the data with given searchTerm
from server and dispatches OPTIONS_RECEIVED
action to update redux store.
function* watchLoadOptions(searchTerm) {
const options = yield call(api.getOptions, searchTerm)
yield put(optionsReceived(options))
}
In other words: Make your Component as pure as possible and handle all side-effect/async calls in redux-saga
I hope this answer was useful for you.