Em aplicações web modernas, a interação com APIs externas é uma prática comum para obter e atualizar dados. O Redux é uma biblioteca amplamente utilizada para gerenciar o estado da aplicação em aplicações React, oferecendo um fluxo previsível para lidar com a busca e armazenamento de dados provenientes de APIs. Neste artigo, exploraremos o fluxo padrão para implementar o carregamento de dados de uma API utilizando o Redux, e exemplificaremos esse processo através de uma chamada para o caminho “/auth/google”, que retorna um objeto se o usuário estiver logado ou nulo caso contrário.

O Fluxo Básico

O fluxo básico para implementar o carregamento de dados de uma API utilizando Redux envolve vários conceitos principais: componente React, action creator, action, reducers e a store.

1. Componente React: Este é o componente da interface de usuário onde você deseja exibir os dados obtidos da API. O componente dispara a solicitação de dados e reage às mudanças no estado da store.
2. Action Creator: Um action creator é uma função que cria e retorna uma action. Uma action é um objeto que descreve a ação que ocorreu na aplicação, geralmente a ação de buscar dados da API.
3. Action: A action é um objeto que contém um tipo (uma string que descreve a ação) e opcionalmente outros dados relevantes, como os dados da API obtidos.
4. Reducers: Os reducers são funções que especificam como o estado da aplicação deve mudar em resposta a uma action. Cada reducer lida com uma parte específica do estado global da aplicação e retorna um novo estado.
5. Store: A store é o estado global da aplicação, que é gerenciado pelo Redux. Ele armazena o estado da aplicação, incluindo os dados obtidos da API.

Exemplo: Carregando Dados da API “/auth/google”

Vamos exemplificar esse fluxo utilizando uma chamada para o caminho “/auth/google” que retorna um objeto se o usuário estiver logado ou nulo caso contrário.

1. Criando o Action Creator

// actions.js

export const fetchGoogleAuth = () => {
  return {
    type: 'FETCH_GOOGLE_AUTH',
  };
};

2. Criando o Reducer

// reducers.js

const initialState = {
  googleAuth: null,
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_GOOGLE_AUTH':
      // Simulando a resposta da API
      const isUserLoggedIn = true; // ou false para simular o usuário não logado
      return {
        ...state,
        googleAuth: isUserLoggedIn ? { isLoggedIn: true } : null,
      };
    default:
      return state;
  }
};

export default authReducer;

3. Configurando a Store

// store.js

import { createStore, combineReducers } from 'redux';
import authReducer from './reducers';

const rootReducer = combineReducers({
  auth: authReducer,
});

const store = createStore(rootReducer);

export default store;

4. Utilizando o Componente React

// App.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchGoogleAuth } from './actions';

function App() {
  const googleAuth = useSelector(state => state.auth.googleAuth);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchGoogleAuth());
  }, [dispatch]);

  return (
    <div className="App">
      {googleAuth ? (
        <p>Usuário Logado</p>
      ) : (
        <p>Usuário Não Logado</p>
      )}
    </div>
  );
}

export default App;

Conclusão

O fluxo padrão para implementar o carregamento de dados de uma API utilizando Redux em aplicações React envolve a interação entre componentes React, action creators, actions, reducers e a store. O exemplo acima ilustra como solicitar dados de uma API, atualizar o estado da store e exibir o resultado na interface de usuário. Essa abordagem ajuda a manter um gerenciamento de estado organizado e previsível, facilitando a criação de aplicações complexas que interagem com APIs externas de forma eficiente e escalável.