javascript - español - redux thunk vs saga

promesa de devolución de la tienda después de redux thunk envío

Question

// EDITADO PARA LA CLARIDAD

Estoy tratando de encadenar despachos con redux thunk

function simple_action(){
  return {type: "SIMPLE_ACTION"}
}

export function async_action(){
  return function(dispatch, getState){
    return dispatch(simple_action).then(()=>{...});
  }
}

¿Cómo obtengo el envío para devolver una promesa de la tienda?

MÁS ESPECÍFICAMENTE:

Probablemente no entiendo algo aquí, pero en todos los ejemplos con redux-thunk , ellos llaman un evento asíncrono separado (como fetch ), que obviamente devuelve una Promise .

Lo que estoy buscando específicamente es cuando envío una acción a la tienda: ¿Cómo me action_creator() la tienda haya procesado esa acción completamente antes de que ocurra cualquier otra cosa en la función action_creator() anterior.

Idealmente, me gustaría que la tienda devolviera algún tipo de promesa, pero no entiendo cómo o dónde sucede eso.

Answer 1

Aquí tiene un ejemplo sobre cómo enviar y encadenar acciones asíncronas. https://github.com/gaearon/redux-thunk

El middleware de thunk sabe cómo convertir las acciones async de thunk en acciones, por lo que solo debe tener su simple_action () para que sea un thunk y el middleware de thunk hará el trabajo por usted, si el middleware ve una acción normal, enviará este Acción como acción normal, pero si es una función asíncrona, convertirá su acción asíncrona en acción normal.

Por lo tanto, su simple_action debe ser un procesador (un procesador es una función que devuelve una función). Así, por ejemplo:

function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize(''The Sandwich Shop'', forPerson, error))
    );
  };
}

Cuando use la función makeASandwichWithSecretSauce, puede usar la función de envío

store.dispatch(
  makeASandwichWithSecretSauce(''Me'')
);

E incluso

// It even takes care to return the thunk’s return value
// from the dispatch, so I can chain Promises as long as I return them.

store.dispatch(
  makeASandwichWithSecretSauce(''My wife'')
).then(() => {
  console.log(''Done!'');
});

Aquí hay un ejemplo completo sobre cómo escribir creadores de acciones que distribuyen acciones y acciones asíncronas de otros creadores de acciones, y construye su flujo de control con Promesas.

function makeSandwichesForEverybody() {
  return function (dispatch, getState) {
    if (!getState().sandwiches.isShopOpen) {
      // You don’t have to return Promises, but it’s a handy convention
      // so the caller can always call .then() on async dispatch result.
      return Promise.resolve();
    }

    //Do this action before starting the next one below 
    dispatch(simple_action());

    // We can dispatch both plain object actions and other thunks,
    // which lets us compose the asynchronous actions in a single flow.
    return dispatch(
      makeASandwichWithSecretSauce(''My Grandma'')
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce(''Me'')),
        dispatch(makeASandwichWithSecretSauce(''My wife''))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce(''Our kids''))
    ).then(() =>
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize(''Me'', ''The Sandwich Shop'')
      )
    );
  };
}
//apologize and withdrawMoney are simple action like this for example
      return {
        type:  "END_SUCESS"
      }

//uso

store.dispatch(
  makeSandwichesForEverybody()
).then(() =>
    console.log("Done !");
);

Para crear tus propias promesas puedes usar una biblioteca como bluebird.

// EDITAR: para asegurarse de que la tienda haya procesado esa acción completamente antes de que ocurra algo más en la función action_creator (), puede enviar este simple_action antes de action_creator (); // Agregué este comentario al código //Do this action before starting the next one below

Answer 2

Este es un patrón que he estado usando recientemente:

export const someThenableThunk = someData => (dispatch, getState) => Promise.resolve().then(() => {
  const { someReducer } = getState();
  return dispatch({
    type: actionTypes.SOME_ACTION_TYPE,
    someData,
  });
});

Cuando dispatch(someThenableThunk(''hello-world'')) , devuelve un objeto Promise que puedes encadenar otras acciones.

Answer 3

dispatch devolverá cualquiera que sea la acción / función a la que llama devoluciones; por lo tanto, si desea encadenar ciertas actividades (según su ejemplo), su acción deberá devolver una Promise .

Como lo menciona @Aaleks, si su acción fuera una thunk , puede crear un escenario en el que devuelva una Promise , entonces podría hacer lo que mencione.

Por cierto, creo que nombrar a su thunk action_creator es un poco engañoso, ya que simple_action es en realidad un creador de acción en el lenguaje de Redux - se ha editado en consecuencia :)