javascript - Encadenando acciones de Redux

Soy nuevo en React, Redux y JS en general. Quiero saber cómo puedo despachar una acción después de que otra haya terminado - Promesas de la manera correcta. Mi código funciona actualmente, pero sigue lanzando un error:

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

Esta es mi configuración.

• Este es mi creador de acciones, lo que quiero es una acción encadenada y donde ocurre la advertencia.

  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}) },
      )
    }
  }
  

Como puedes ver, el problema está en .then, ya que no sé cómo activar la acción correctamente.

• También puedes ver que la solicitud es mi función auxiliar que se ve así (aquí agrego el token, devuelvo diferentes respuestas):

  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)
          })
  }
  

La pregunta es cómo puedo ejecutar correctamente .then y cuál sería la manera correcta?

Respuesta #1

Si quieres enviar acciones en cadenas, en realidad puedes implementarlo por tu cuenta.

Ahora, después de analizar un poco, tomas un bolígrafo y papel y comienzas a escribir el algoritmo básico de cómo debería funcionar y llegas a lo siguiente:-

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

Ahora, desde arriba, si ves eso, creas un middleware y sigues despachando acciones que devuelven funciones hasta que obtienes una acción que devuelve un objeto. Esto es lo que hace redux-thunk.

Así que incluso si tratas de crear algo propio, hazlo para tu aprendizaje, pero eventualmente se te ocurrirá algo como thunk o tal vez algún otro paquete.

Realmente diría que pruebes redux-thunk. También, para entender el middleware, te recomendaría que revises la documentación de middleware de redux.