Los reducers son el núcleo de la gestión de estado en Redux, y dominar su escritura es clave para construir aplicaciones React robustas. Este artículo presenta siete prácticas fundamentales para crear reducers eficientes y mantenibles, basadas en patrones comunes de proyectos Redux modernos.
- Comprender el rol de los reducers como funciones puras
Un reducer es una función pura que toma el estado actual y una acción, y devuelve un nuevo estado. En una tienda Redux típica, cada reducer gestiona una porción específica del estado. Por ejemplo, en una aplicación de gestión de publicaciones, un reducer de publicaciones maneja acciones como agregar, eliminar o actualizar publicaciones.
- Inicializar el estado con parámetros por defecto
Siempre define un valor inicial para tu reducer usando un parámetro por defecto. Esto evita errores de undefined al arrancar la aplicación.
export default function(state = [], action) {
switch (action.type) {
case "ADD_ITEM":
return [...state, action.payload];
default:
return state;
}
}
En este ejemplo, si el estado es undefined, se usa un arreglo vacío como valor inicial. Esto asegura que el reducer siempre tenga un estado definido.
- Mantener la inmutabilidad del estado
Un reducer nunca debe mutar el estado actual. En su lugar, debe devolver un nuevo objeto o arreglo. En el ejemplo anterior, se usa el operador ... para crear un nuevo arreglo que incluye el nuevo elemento, sin modificar el arreglo original.
case FETCH_WEATHER:
return [action.payload.data, ...state];
Esta técnica evita efectos secundarios y garantiza que el estado se actualice de forma predecible.
- Dividir la lógica con combineReducers
A medida que la aplicación crece, es recomendable dividir el estado en múltiples reducers, cada uno enfocado en una parte de los datos. combineReducers permite integrarlos en un solo reducer raíz.
const rootReducer = combineReducers({
users: reducerUsuarios,
posts: reducerPublicaciones,
ui: reducerInterfaz
});
Cada reducer maneja su propia sección del estado, lo que facilita el mantenimiento y la escalabilidad.
- Normalizar estructuras de datos complejas
Cuando los datos contienen relaciones entre entidades, normalizar la estructura del estado mejora el rendimiento. Por ejemplo, convertir un arreglo de objetos en un mapa de IDs a objetos permite búsquedas rápidas.
case FETCH_POSTS:
return _.mapKeys(action.payload.data, "id");
Esta técnica es útil para datos como publicaciones, comentarios o listas de usuarios.
- Manejar operaciones asíncronas en el estado
Las operaciones asíncronas, como llamadas API, requieren acciones que actualicen el estado en diferentes momentos. Un reducer puede almacenar los resultados de estas operaciones sin realizar la llamada directamente.
case FETCH_WEATHER_SUCCESS:
return [action.payload, ...state];
El reducer solo actualiza el estado con los datos recibidos, manteniendo la lógica asíncrona fuera de él.
- Simplificar la escritura con herramientas modernas
Aunque el patrón switch es común, herramientas como createSlice de Redux Toolkit reducen el código repetitivo y mejoran la claridad. Estas funciones generan automáticamente acciones y reducers.
const postsSlice = createSlice({
name: 'posts',
initialState: [],
reducers: {
addPost(state, action) {
state.push(action.payload);
}
}
});
Con createSlice, el código es más conciso y fácil de mantener, manteniendo la pureza del reducer bajo el capó.