1. Introdução à lógica assíncrona no Redux Toolkit

O tratamento da lógica assíncrona no Redux geralmente envolve muito código clichê, como a criação de tipos de ação, criadores de ação e redutores para lidar com diferentes estados (carregamento, sucesso, erro). Redux Toolkit simplifica isso com createAsyncThunk, que permite definir um "thunk" para operações assíncronas com configuração mínima.

criarAsyncThunk:

• Gera automaticamente tipos de ações pendentes, concluídas e rejeitadas.
• Torna mais fácil lidar com efeitos colaterais, como solicitações de API.
• Integra-se perfeitamente com fatias criadas usando createSlice.

2. Usando createAsyncThunk para chamadas de API

Vamos criar uma conversão assíncrona para buscar dados de uma API pública e gerenciar diferentes estados de carregamento.

Etapa 1: Configurando um serviço de API simples
Usaremos uma API pública gratuita para demonstrar este exemplo. Vamos supor que temos um endpoint de API que retorna uma lista de postagens.

Etapa 2: Criando uma conversão assíncrona
Primeiro, crie um novo arquivo de fatia chamado postsSlice.js dentro do diretório features/posts. Usaremos createAsyncThunk para buscar postagens de forma assíncrona.

// 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;

Explicação:

createAsyncThunk: esta função recebe dois argumentos: um tipo de ação de string e uma função assíncrona. A função assíncrona é onde a chamada da API acontece. Quando a promessa é resolvida, os dados são retornados e despachados automaticamente como a carga útil da ação cumprida.

extraReducers: é usado para lidar com ações geradas por createAsyncThunk. Gerenciamos três estados: pendente, cumprido e rejeitado.

3. Integrando Thunks em Componentes

Agora, vamos usar a conversão fetchPosts em um componente React e exibir os dados.

Etapa 1: Crie um componente PostsList
Crie um componente PostsList.js no diretório features/posts:

// 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}

Explicação:

O gancho useEffect despacha fetchPosts quando o componente é montado, mas apenas se o status atual for 'idle'.
O status é verificado para determinar qual conteúdo renderizar (carregamento giratório, lista de postagens ou mensagem de erro).

Etapa 2: adicionar PostsList ao aplicativo

Atualize o arquivo App.js principal para incluir o componente PostsList:

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

function App() {
  return (
    

      
    
  );
}

export default App;

4. Melhores práticas para conversões assíncronas

Evite lógica pesada em componentes: mantenha os componentes limpos despachando conversões para lidar com lógica assíncrona.
Centralize o tratamento de erros: lide com erros em sua fatia em vez de repetir a lógica em cada componente.
Normalizar dados: considere normalizar a forma do estado usando bibliotecas como normalizr para gerenciar estruturas de dados complexas com eficiência.
Memoize seletores: Use createSelector da nova seleção para memorizar seletores para melhor desempenho.

5. Conclusão e próximas etapas
Nesta parte, exploramos como lidar com lógica assíncrona no Redux Toolkit usando createAsyncThunk. Aprendemos como criar uma conversão assíncrona, lidar com diferentes estados e usá-la em um componente. Na próxima parte, nos aprofundaremos no RTK Query – uma ferramenta poderosa para busca e armazenamento em cache de dados que simplifica ainda mais o desenvolvimento do Redux.

_
Fique ligado na Parte 3: Introdução à consulta RTK!_