Otra ocurrencia común es la necesidad de despachar múltiples acciones Redux juntas. Por ejemplo, digamos que en el formulario mencionado anteriormente, necesitamos deshabilitar el botón de envío cuando el usuario hace clic en él (para evitar que el usuario lo active compulsivamente), y volver a habilitar el botón cuando se recibe la respuesta de la API. Hay dos formas de manejar esto.
En primer lugar, podríamos utilizar la misma lógica que antes, donde tenemos un reductor de UI para el botón que escucha un conjunto específico de acciones. Incluimos la formaActionRequest al conjunto de acciones de escucha y desactivamos el botón cuando se despacha. Luego escuchamos la formaActionSuccess y la formaActionError y activamos el botón cuando cualquiera de ellas es enviada. Aunque esta es una solución sólida, reduce enormemente la legibilidad del código. A diferencia del sistema de notificación, el botón no es un requerimiento central, y no necesita ser manejado de esta manera.
Alternativamente, podemos usar acciones de UI separadas declaradas como disableSubmitButton y enableSubmitButton. Y en nuestra formAction, primero enviamos disableSubmitButton antes de la solicitud de la API, y al recibir la respuesta de la API enviamos enableSubmitButton.
123456789101112131415161718192021222324252627282930313233343536373839// uiActions. jsexportconstENABLE_SUBMIT_BUTTON="ENABLE_SUBMIT_BUTTON";exportconstDISABLE_SUBMIT_BUTTON="DISABLE_SUBMIT_BUTTON";exportfunctionenableSubmitButton(){return{ type: ENABLE_SUBMIT_BUTTON}}exportfunctiondisableSubmitButton(){return{ type:DISABLE_SUBMIT_BUTTON}}// uiReducer. js// este reductor es responsable de los cambios de la UI en la forma// nota que la eficiencia real viene con la capacidad de separar la lógica de la aplicación// de la lógica de la UI dividiéndola en diferentes reductoresimport{ENABLE_SUBMIT_BUTTON,DISABLE_SUBMIT_BUTTON} de$0027uiAcions. js$0027;const initState ={ formSubmit:{ enabled:true}};exportfunctionuiReducer(state = initState, action){switch(action.type){caseENABLE_SUBMIT_BUTTON: state.formSubmit.enabled=true;return state;caseDISABLE_SUBMIT_BUTTON: state.formSubmit.enabled=false;return state;}}javascript
Ahora modificamos la formaAcción para utilizar las acciones anteriores.
12345678910111213141516import{ enableSubmitButton, disableSubmitButton }from$0027uiActions.js$0027;exportconstformAction=(formData)={{{{returnasyncfunction(dispatch){dispatch(formActionRequest());dispatch(disableSubmitButton())try{let response =(await axios. post("http://yourapi.com/form", formData)).data;dispatch(formActionSuccess(response));}catch(error){dispatch(formActionError(response.error));}finally{dispatch(enableSubmitButton())}}javascript
Como se muestra arriba, esto mejora enormemente la legibilidad del código y evita la necesidad de mantener un «conjunto de acciones» en el lado del reductor de la UI para escuchar. Aunque el fragmento anterior sólo demuestra el uso de la misma, su potencia real se da en escenarios complejos en los que es necesario despachar múltiples acciones de este tipo dentro de una única acción.