En Redux, todas las acciones son síncronas por defecto, lo que significa que se ejecutan secuencialmente. Sin embargo, a veces puede haber necesidad de ejecutar acciones de manera asincrónica, como en el caso de las solicitudes de API. Esta operación asincrónica es lo que se conoce como efectos secundarios.
Hay varias formas de manejar estos efectos secundarios en Redux. Algunas de las bibliotecas populares utilizadas para manejar los efectos secundarios asincrónicos en Redux incluyen redux-thunk, redux-saga y redux-observable.
1. Redux-Thunk: Redux-Thunk es un middleware de Redux que permite escribir acciones creadoras que devuelven una función en lugar de un objeto de acción. La función interna recibe los métodos de la tienda `dispatch` y `getState` como parámetros. Redux-Thunk es útil para operaciones asincrónicas simples.
```js
const asyncActionCreator = () => {
return (dispatch, getState) => {
// perform asynchronous operation
…
// then dispatch an action with the result
dispatch({ type: ‘ACTION_TYPE’, payload: result});
}
}
```
2. Redux-Saga: Redux-Saga utiliza generadores de JavaScript para hacer su magia. Los efectos secundarios asincrónicos se describen como “sagas”. En lugar de despachar una acción asincrónica directamente, despachas una acción simple que las sagas capturan. A partir de ahí, las sagas pueden decidir hacer algo asincrónico y luego despachar más acciones con los resultados de esas operaciones asincrónicas.
```js
import { call, put } from ‘redux-saga/effects’
function* userSaga() {
try {
const user = yield call(Api.fetchUser);
yield put({type: “USER_FETCH_SUCCEEDED”, user: user});
} catch (e) {
yield put({type: “USER_FETCH_FAILED”, message: e.message});
}
}
```
3. Redux-Observable: Redux-Observable, que se basa en RxJS, es otra solución común para manejar los efectos secundarios en Redux. Maneja efectos secundarios como “streams de eventos”. Esta naturaleza basada en eventos le da a redux-observable el poder de manejar operaciones complejas y secuenciales de manera declarativa y en una ubicación centralizada.
```js
const fetchUserEpic = action$ => action$.pipe(
ofType(‘FETCH_USER’),
mergeMap(action =>
ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
map(response => fetchUserFulfilled(response))
)
)
);
```
La elección entre estas bibliotecas y otras depende de tus necesidades y preferencias específicas.
