javascript - Řetězení akcí Redux

Jsem nováček v Reactu, Reduxu a celkově v JS. Chci vědět, jak mohu spustit jednu akci po dokončení jiné - Promises správným způsobem. Můj kód sice funguje, ale neustále vrhá chybu:

readingActions.js?14b9:56 Uncaught (in promise) TypeError: dispatch(...).then is not a function(…)

Toto je moje sestavení.

• Toto je můj akční tvůrce, chci řetězenou akci a tam, kde nastane varování.

  export function createReading(reading) {
    return function (dispatch) {
      dispatch({type: CREATE_READING});
      return request(
        `${API_URL}new`, {method: 'POST', body:JSON.stringify(reading)},
        (json) => {( dispatch({type: CREATE_READING_SUCCESS, res: json}).then(dispatch(Notifications.success(showSuccess(json.book.title)))))},
        (json) => { dispatch({type: CREATE_READING_ERROR400, res: json}).then(dispatch(Notifications.error(showError(json.error)))) },
        (res) => { dispatch({type: CREATE_READING_ERROR500, res: res}) },
        (ex) => { dispatch({type: CREATE_READING_FAILURE, error: ex}) },
      )
    }
  }
  

Jak vidíte, problém je v .then, protože nevím, jak správně spustit akci.

• Také můžete vidět request, což je moje pomocná funkce, která vypadá takto (zde přidávám token, vracím různé odpovědi):

  export function request(url, options, success, error400, error, failure) {
      let headers = new Headers();
      headers.append("Content-Type", "application/json")
      headers.append("Accept", "application/json")
      options["headers"] = headers;
  
       if (localStorage.jwtToken) {
          let token = localStorage.jwtToken;
          headers.append('Authorization', 'JWT '+token);
       }
  
      return fetch(url, options)
          .then(res => {
              if (res.status >= 200 && res.status < 300) {
                  res.json().then(json => {
                       return success(json)
                  })
              } else if (res.status === 400) {
                  res.json().then(json => {
                      return error400(json)
                  })
              } else {
                  return error(res)
              }
          }).catch((ex) => {
              return failure(ex)
          })
  }
  

Otázka je, jak mohu správně provést .then a jaký by byl správný způsob?

Odpověď č. 1

Pokud chcete spouštět akce v řetězcích, můžete si to vlastně implementovat sami.

Teď řekněme, že po chvíli analýzy vezmete pero a papír a začnete psát základní algoritmus toho, jak by to mělo fungovat, a přijdete na následující:-

dispatch(action) => action returns function => action returns function => action returns an object(here you chain ends)

Nyní, když se na to díváte z výše, vytvoříte middleware a pokračujete v odesílání akcí, které vracejí funkce, dokud nedostanete akci, která vrací objekt. To je to, co redux-thunk dělá.

Takže i když se pokusíte vytvořit něco vlastního, dělejte to pro své učení, ale nakonec přijdete s něčím jako thunk nebo možná nějakým jiným balíčkem.

Opravdu bych řekl, že byste měli vyzkoušet redux-thunk. Také pro porozumění middleware bych vám doporučil podívat se na dokumentaci k middleware v Reduxu.