Sobes.tech
Middle

Quais abordagens populares foram desenvolvidas para usar Redux?

sobes.tech IA

Resposta da IA

  • Redux Vanilla: Abordagem básica usando createStore, ações regulares, reducers e seletores. Requer muito boilerplate.
  • Redux Toolkit: Abordagem recomendada. Simplifica a configuração e o trabalho com Redux usando utilitários como configureStore, createSlice, createAsyncThunk. Reduz a quantidade de boilerplate.
  • Reducers com Immer: Usar a biblioteca Immer dentro dos reducers permite mutar o estado diretamente em um "rascunho", e o Immer gera um novo estado imutável. Simplifica a lógica dos reducers.
  • Ducks: Abordagem estruturada onde reducers, ações e tipos de ações para uma funcionalidade ou módulo específico são agrupados em um único arquivo. Melhora a legibilidade e a manutenção.
// Exemplo de estrutura Ducks
// myFeature.js

const initialState = {
  // ...
};

const MY_FEATURE_ACTION = 'myFeature/MY_FEATURE_ACTION';

export default function myFeatureReducer(state = initialState, action) {
  // ...
}

export const myFeatureActionCreator = (payload) => ({
  type: MY_FEATURE_ACTION,
  payload,
});
  • Abordagem modular: Estruturação da lógica do Redux por funcionalidades ou módulos, onde cada módulo tem seus reducers, ações e seletores, frequentemente usando Redux Toolkit e hooks useSelector/useDispatch.
  • Redux-Saga/Redux-Thunk para efeitos secundários: Uso de middlewares para gerir operações assíncronas. Redux-Thunk para ações assíncronas simples (por exemplo, fetch), Redux-Saga para cenários mais complexos (concorrência, cancelamento, atraso).
// Exemplo de Redux-Thunk
const fetchData = () => {
  return async (dispatch) => {
    try {
      dispatch({ type: 'FETCH_START' });
      const response = await fetch('/api/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_FAILURE', payload: error.message });
    }
  };
};
  • Normalização do estado (Normalizr): Quando se trabalha com dados aninhados e relacionados, a normalização ajuda a evitar duplicação e facilita as atualizações.