plus - Usa async react-select con redux-saga

react-select async

Question

Intento implementar una selección de reacción asíncrona ( Select.Async ). El problema es que queremos hacer la búsqueda en redux-saga. Entonces, si un usuario escribe algo, se debe activar la acción de búsqueda. Saga luego busca el registro y los guarda en la tienda. Esto funciona hasta ahora. Lamentablemente, loadOptions tiene que devolver una promesa o se debe llamar a la devolución de llamada. Como las opciones recién recuperadas se propagan con una propiedad cambiante, no veo forma de usar Select.Async junto con saga para hacer la llamada asincrónica. ¿Alguna sugerencia?

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

Tuve un truco donde asigné la devolución de llamada a una variable de clase y lo resolví en componentWillReceiveProps. De esa manera feo y no funcionó correctamente, así que busco una mejor solución.

Gracias

Answer 1

redux-saga es para manejar efectos secundarios, como la recepción asíncrona de opciones para la selección de react-select . Es por eso que debes dejar las cosas asincrónicas para redux-saga . Nunca utilicé react-select pero con solo mirar la documentación lo resolvería de esta manera:

Tu componente se vuelve muy simple. Solo obtenga value y options de su tienda redux. optionsRequested es un creador de acciones para la acción 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)

Una definición de saga observa la acción OPTIONS_REQUESTED que se activa mediante onInputChange , carga los datos con el searchTerm de searchTerm del servidor y distribuye la acción OPTIONS_RECEIVED para actualizar la tienda redux.

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

En otras palabras: haz que tu Componente sea lo más puro posible y maneja todas las llamadas de efecto secundario / asincrónicas en redux-saga

Espero que esta respuesta sea útil para ti.