Mis disculpas si hay una pregunta similar a esta en StackOverflow, pero después de 3 horas de búsqueda no pude encontrar ninguna.
Estoy tratando de aprender Redux y superar la competencia de principiante con ReactJS y tengo la siguiente función thunk:
export const listProducts = () => async (dispatch) => { try{ dispatch({ type:PRODUCT_LIST_REQUEST }) const { data } = await axios.get('/api/products/') dispatch({ type:PRODUCT_LIST_SUCCESS, payload: data }) }catch(error){ dispatch({ type:PRODUCT_LIST_FAIL, payload: misc_data_here }) }} Esta función se llama en otro archivo dentro de una función de dispatch con el código relevante de la siguiente manera:
function HomeScreen() { const dispatch = useDispatch() const productList = useSelector(state => state.productList) const { error, loading, products } = productList useEffect(() => { dispatch(listProducts()) }, [dispatch]) return (rest of UI...]Mi pregunta es la siguiente:
¿Cómo se llama exactamente listProducts en este caso por redux? Debería llamarse como listProducts()(dispatch function here) si mi (pobre) comprensión es correcta. ¿Cómo se alimenta exactamente el thunk ( async (dispatch) ) con la función de envío y qué es lo que realmente devuelve la función listProducts en la llamada de dispatch dentro de HomeScreen() ?
Redux no llama a su creador de acciones listProducts , lo hace, cuando envía la acción. El middleware thunk redux comprueba si el valor de la acción es un objeto, es decir, como un objeto de acción normal o una función. Si es una función, el middleware invoca la función curry y pasa las funciones de dispatch y getState para que se maneje la lógica asíncrona y se puedan enviar otras acciones.
¿Cómo funciona el software intermedio?
La implementación real del middleware thunk es muy corta: solo unas 10 líneas. Aquí está la fuente, con comentarios adicionales agregados:
Implementación de middleware de redux thunk, anotada
// standard middleware definition, with 3 nested functions: // 1) Accepts `{dispatch, getState}` // 2) Accepts `next` // 3) Accepts `action` const thunkMiddleware = ({ dispatch, getState }) => next => action => { // If the "action" is actually a function instead... if (typeof action === 'function') { // then call the function and pass `dispatch` and `getState` as arguments return action(dispatch, getState) } // Otherwise, it's a normal action - send it onwards return next(action) }En otras palabras:
- Si pasa una función a despacho, el middleware thunk ve que es una función en lugar de un objeto de acción, lo intercepta y llama a esa función con (dispatch, getState) como sus argumentos
- Si es un objeto de acción normal (o cualquier otra cosa), se reenvía al siguiente middleware de la cadena.
Consulte también el flujo de datos Redux Async para obtener una excelente explicación visual animada.