Sobes.tech
Middle

¿Qué enfoques populares se han desarrollado para usar Redux?

sobes.tech AI

Respuesta de la IA

  • Redux Vanilla: Enfoque básico usando createStore, acciones regulares, reductores y selectores. Requiere mucho código boilerplate.
  • Redux Toolkit: Enfoque recomendado. Simplifica la configuración y el trabajo con Redux mediante utilidades como configureStore, createSlice, createAsyncThunk. Reduce la cantidad de código boilerplate.
  • Reductores con Immer: Usar la biblioteca Immer dentro de los reductores permite mutar el estado directamente en un "borrador", y Immer genera un nuevo estado inmutable. Simplifica la lógica de los reductores.
  • Ducks: Enfoque estructurado donde reductores, acciones y tipos de acciones para una característica o módulo específico se agrupan en un solo archivo. Mejora la legibilidad y el mantenimiento.
// Ejemplo de estructura 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,
});
  • Enfoque modular: Estructuración de la lógica de Redux por características o módulos, donde cada módulo tiene sus reductores, acciones y selectores, a menudo usando Redux Toolkit y hooks useSelector/useDispatch.
  • Redux-Saga/Redux-Thunk para efectos secundarios: Uso de middlewares para gestionar operaciones asíncronas. Redux-Thunk para acciones asíncronas simples (por ejemplo, fetch), Redux-Saga para escenarios más complejos (competencia, cancelación, retraso).
// Ejemplo 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 });
    }
  };
};
  • Normalización del estado (Normalizr): Cuando se trabaja con datos anidados y relacionados, la normalización ayuda a evitar duplicados y facilita las actualizaciones.