Redux Thunk es un middleware para Redux que permite a los creadores de acciones devolver una función en lugar de un objeto de acción. Esta función puede ser utilizada para retrasar la expulsión de una acción, o para despachar solo si se cumple cierta condición.
Aquí hay un simple ejemplo de cómo usar Redux Thunk:
Paso 1: Instala redux-thunk:
```sh
npm install redux-thunk
```
Paso 2: Aplica el middleware en la creación de la tienda:
```js
import { createStore, applyMiddleware } from ‘redux’;
import thunk from ‘redux-thunk’;
import rootReducer from ‘./reducers’;
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
```
Paso 3: Crea un creador de acciones con thunk:
```js
function fetchPostsRequest() {
return {
type: “FETCH_REQUEST“
}
}
function fetchPostsSuccess(payload) {
return {
type: “FETCH_SUCCESS”,
payload
}
}
function fetchPostsError() {
return {
type: “FETCH_ERROR“
}
}
function fetchPosts() {
return function(dispatch) {
dispatch(fetchPostsRequest())
return fetch(`/posts`)
.then(resp => resp.json())
.then(data => dispatch(fetchPostsSuccess(data)))
.catch(err => dispatch(fetchPostsError(err)))
}
}
export default fetchPosts;
```
En este caso, `fetchPosts` es un creador de acciones que devuelve una función en lugar de un objeto. Cuando esta función es despachada, primero despacha `fetchPostsRequest` para indicar que ha comenzado a buscar posts. Luego realiza una solicitud a una API y espera a que se complete.
Si la solicitud tiene éxito, despacha `fetchPostsSuccess` con la respuesta de la API, si la solicitud falla, despacha `fetchPostsError`.
Esto te permite manejar toda la lógica asincrónica en tus creadores de acciones en lugar de en tus componentes o en otro lugar.
Paso 4: Ahora puedes despachar `fetchPosts()` desde cualquier componente y Redux Thunk se encargará del resto:
```js
import React, { useEffect } from ‘react’;
import { useDispatch } from ‘react-redux’;
import fetchPosts from ‘./actions/fetchPosts’;
function Posts() { const dispatch = useDispatch();
useEffect(() => { dispatch(fetchPosts()); }, [dispatch]); return ( //Tu componente aquí ); }export default Posts;
```
