0

Estoy haciendo un proyecto en el cual tengo que utilizar redux-thunk alguien podría darme un buen pantallazo de manera lógica por que en este código se le pasa al action creator el parámetro de esta forma:

const _removeBook = ({ id } = {}) => ({
    type: 'REMOVE_BOOK',
    id
});
 
export const removeBook = ({ id } = {}) => {
    return (dispatch) => {
        return axios.delete(`books/${id}`).then(() => {
            dispatch(_removeBook({ id }));
        })
    }
};

2 respuestas 2

0

Mejor simplificar los parámetros. En ves de poner como parámetros { id }, puedes simplemente poner id.

A veces, algunos devs hacen desestructuración en Redux pero no es necesario. Sólo necesitas desestructurar/hacer desestructuración (destructuring en inglés) en los componentes React con los props. Puedes cambiar el código a esto:

const removeBookSuccess = (id) => ({
  type: 'REMOVE_BOOK_SUCCESS',
  id
})

export const removeBook = (id) => (dispatch) => {
  dispatch({ type: 'REMOVE_BOOK', id })

  axios
    .delete(`books/${id}`)
    .then(() => {
      // Si llegas aquí, debes ver en Redux Dev Tools:
      //    REMOVE_BOOK
      //    REMOVE_BOOK_SUCCESS
      dispatch(removeBookSuccess(id))
    })
    .catch((error) => {
      // Si ves eso, tienes un error del API
      dispatch({ type: 'REMOVE_BOOK_ERROR' })
      console.error('>> ERROR', error)
    })
}

Los action creators en Redux Thunk tienen que devolver una función que tiene el dispatch en los argumentos. También hay getState:

const removeBook = (id) => (dispatch, getState) => { }

Si necesitas accesar el state de Redux, puedes hacerlo aquí. También si necesitas buscar informaciones de un API, puedes hacer una operación asincrónica y reaccionar al éxito o al fracaso.

0

Cómo decía la respuesta anterior es mejor colocar id solamente e igualmente una buena manera y la mejor de ejecutar una action de Redux es hacer lo siguiente:

const _removeBook = ( id ) => ({
type: types.removeBook,
payload: id
})

Donde types es un objeto que tiene removeBook: "REMOVE_BOOK"y todas las que necesites. y el payload donde va toda la información (si has usado el useReducer lo sabrás) así que en el reducer en vez de tomar la data sola la tomas como action.payload

La operación asíncrona puede ser usando un async await Es decir: return async (Dispatch) => { } la respuesta la tomas como: const resp = axios.delete('url') Y después de esa línea verificas que tenga un status 200 o una respuesta OK dentro de la respuesta y con un simple if( estado === 200 || resp.ok === true) decides si ejecutar el dispatch o no

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.