reactjs - props - react select v2

Cómo despachar múltiples acciones una tras otra

Question

En mi aplicación reaccion / redux a menudo quiero enviar varias acciones después de otra.

Dado el siguiente ejemplo: Después de un inicio de sesión exitoso, quiero almacenar los datos del usuario y después de eso , deseo iniciar otra acción asíncrona que carga la configuración de la aplicación desde el servidor.

Sé que puedo usar redux-thunk para construir un creador de acción como este

function loginRequestSuccess(data) {
  return function(dispatch) {
    dispatch(saveUserData(data.user))
    dispatch(loadConfig())
  }
}

Así que mis preguntas son:

1. Cuando el primer dispatch regresa, ¿el estado ya ha sido cambiado por todos los reductores que escuchan esa acción? Me pregunto si las dos llamadas de despacho se ejecutan de forma estrictamente secuencial.
2. ¿Este enfoque se considera la mejor práctica para el envío de acciones múltiples? Si no, ¿qué sugerirías alternativamente?

¡Gracias por cualquier ayuda!

Answer 1

Sé que es una respuesta tardía :-P Puedes hacer esto usando Redux-Thunk y también pagando Redux-Saga. Redux Saga proporciona una manera asombrosa de manejar cargas de acciones al mismo tiempo. A continuación se muestra un ejemplo de envío de múltiples acciones usando Redux-Thunk

function getAndLoadSider(moduleName){
    return function(dispatch){
        return doSomeApiCall(someData).then(function(item){
            let _item = someOtherFunction(item.collections);
                let _menuData = {
                    name: item.name,
                    key: item.key
                };
            return new Promise(function(res, rej){
                dispatch(actionOne(_menuData));
                res(_item);
            }).then((_item) =>  dispatch(actionTwo(_item)))
    }
}

El método anterior funciona bien para su caso cuando una acción depende de la primera. Este es un enfoque basado en la promesa. Si no te gusta hacer un montón de codificación de Promise, te recomiendo que vayas a Sagas. Echa un vistazo a este enlace https://redux-saga.js.org/docs/advanced/ComposingSagas.html donde aprenderás cómo componer sagas. La curva de aprendizaje es empinada; Pero una vez que hayas terminado, Sagas te hará un dev de ninja redux.

Espero que esto ayude :-)

Answer 2

Sí, redux-thunk le permite hacer lo que dice, y sí, es una práctica recomendada para enviar múltiples acciones (una que prefiero sobre las alternativas debido a su simplicidad). De hecho, el estado se actualiza tan pronto como se despacha (para cuando regresa), por lo que se le da una función para recuperar el estado en un procesador, en lugar de simplemente una referencia al estado. De esa manera, puede alterar el estado con un envío y luego llamar a getState () para obtener una referencia al nuevo estado para leer si es necesario.

Answer 3

redux-thunk es exactamente lo que estás buscando. Lo considero muy buena práctica.

Para responder a su pregunta, de hecho, cuando el primer envío devuelve, el estado ya ha sido cambiado por los reductores llamados.