1. Introducción a la lógica asíncrona en Redux Toolkit

El manejo de la lógica asincrónica en Redux a menudo implica una gran cantidad de código repetitivo, como la creación de tipos de acciones, creadores de acciones y reductores para manejar diferentes estados (carga, éxito, error). Redux Toolkit simplifica esto con createAsyncThunk, que le permite definir un "thunk" para operaciones asincrónicas con una configuración mínima.

crearAsyncThunk:

• Genera automáticamente tipos de acciones pendientes, cumplidas y rechazadas.
• Facilita el manejo de efectos secundarios como solicitudes de API.
• Se integra perfectamente con sectores creados con createSlice.

2. Uso de createAsyncThunk para llamadas API

Veamos cómo crear un procesador asíncrono para recuperar datos de una API pública y administrar diferentes estados de carga.

Paso 1: Configurar un servicio API simple
Usaremos una API pública gratuita para demostrar este ejemplo. Supongamos que tenemos un punto final API que devuelve una lista de publicaciones.

Paso 2: Crear un procesador asíncrono
Primero, cree un nuevo archivo de segmento llamado postsSlice.js dentro del directorio características/publicaciones. Usaremos createAsyncThunk para recuperar publicaciones de forma asincrónica.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

Explicación:

createAsyncThunk: esta función toma dos argumentos: un tipo de acción de cadena y una función asincrónica. La función asíncrona es donde ocurre la llamada API. Cuando la promesa se resuelve, los datos se devuelven y se envían automáticamente como la carga útil de la acción cumplida.

extraReducers: se utiliza para manejar acciones generadas por createAsyncThunk. Gestionamos tres estados: pendiente, cumplido y rechazado.

3. Integración de Thunks en componentes

Ahora, usemos el procesador fetchPosts en un componente de React y mostremos los datos.

Paso 1: Crear un componente de lista de publicaciones
Cree un componente PostsList.js en el directorio características/publicaciones:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = 
Loading...
;
  } else if (status === 'succeeded') {
    content = (
      

{posts.map((post) => (
• {post.title}
))}

{error}

Explicación:

El gancho useEffect distribuye fetchPosts cuando el componente se monta, pero solo si el estado actual es "inactivo".
El estado se verifica para determinar qué contenido mostrar (control giratorio de carga, lista de publicaciones o mensaje de error).

Paso 2: Agregar lista de publicaciones a la aplicación

Actualice el archivo App.js principal para incluir el componente PostsList:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    

      
    
  );
}

export default App;

4. Mejores prácticas para procesadores asíncronos

Evite la lógica pesada en los componentes: mantenga los componentes limpios enviando procesadores para manejar la lógica asincrónica.
Centralice el manejo de errores: maneje los errores en su segmento en lugar de repetir la lógica en cada componente.
Normalizar datos: considere normalizar la forma del estado utilizando bibliotecas como normalizr para administrar estructuras de datos complejas de manera eficiente.
Memoizar selectores: utilice createSelector desde reselección para memorizar selectores y obtener un mejor rendimiento.

5. Conclusión y próximos pasos
En esta parte, exploramos cómo manejar la lógica asincrónica en Redux Toolkit usando createAsyncThunk. Aprendimos cómo crear un procesador asíncrono, manejar diferentes estados y usarlo en un componente. En la siguiente parte, profundizaremos en RTK Query, una poderosa herramienta para recuperar y almacenar en caché datos que simplifica aún más el desarrollo de Redux.

_
¡Estén atentos a la Parte 3: Introducción a la consulta RTK!_