Fundamentos de Redux Toolkit y Principios de Diseño UX/UI

1. Diferencias entre Action y Reducer en Redux Toolkit

Un action es un objeto que representa un evento o cambio que se desea realizar en el estado. Un reducer es una función pura que recibe el estado actual y el action, devolviendo el nuevo estado. En resumen: el action dispara la intención de cambio y el reducer procesa dicha lógica para actualizar el estado.

2. Rol del Provider y el Store en Next.js

El store es el contenedor que almacena el estado global de la aplicación. El Provider actúa como un envoltorio (wrapper) de la aplicación, proporcionando acceso al store para que cualquier componente pueda interactuar con él mediante los hooks useSelector y useDispatch.

3. Paso de funciones como props

Las funciones se pasan como cualquier otra propiedad (prop) entre componentes:

<ComponenteHijo miFuncion={funcionPadre} />

Este patrón es útil para que un componente hijo pueda ejecutar una lógica definida en el componente padre, por ejemplo, al gestionar eventos como clics en botones o el envío de formularios.

4. Concepto de Affordance en interfaces digitales

El affordance se refiere a las características visuales de un objeto que indican cómo debe ser utilizado. Mejora la usabilidad al permitir que el usuario comprenda la funcionalidad sin necesidad de instrucciones explícitas.

Ejemplo: Un botón con relieve y un color distintivo sugiere visualmente que es un elemento interactivo que puede ser presionado.

5. El modelo mental del usuario

El modelo mental es la representación interna que el usuario construye sobre cómo espera que funcione una interfaz. Considerarlo es crítico en el diseño, ya que al alinear la interfaz con las expectativas del usuario, se facilita el aprendizaje, se reducen los errores y se optimiza la experiencia de uso.

6. La regla 60-30-10 en diseño de interfaces

Esta regla permite distribuir los colores de una interfaz de manera equilibrada:

• 60%: Color principal (fondo o base).
• 30%: Color secundario.
• 10%: Color de acento (para elementos destacados).

Se utiliza para lograr armonía visual y dirigir la atención hacia elementos clave como llamadas a la acción (CTA).

7. Diferencia entre useSelector y useDispatch

Respuesta correcta: useSelector permite leer datos del store mediante una función selectora, mientras que useDispatch retorna la función necesaria para enviar acciones al store.

8. Principio de Progressive Disclosure

Respuesta correcta: Progressive Disclosure (Revelación Progresiva). Este principio reduce la carga cognitiva al mostrar únicamente la información necesaria en cada momento, revelando detalles adicionales solo cuando el usuario los requiere.

9. El problema del Props Drilling

Respuesta correcta: Ocurre cuando es necesario pasar datos a través de múltiples niveles intermedios de componentes para llegar a un componente profundo que realmente necesita dicha información.

10. Esquemas de color: Análogo, Complementario y Monocromático

• Análogo: Utiliza colores cercanos en la rueda cromática. Produce armonía y es ideal para blogs o aplicaciones que buscan transmitir calma.
• Complementario: Utiliza colores opuestos. Genera un alto contraste, siendo ideal para botones, llamadas a la acción o comercio electrónico.
• Monocromático: Utiliza diferentes tonos del mismo color. Ofrece una apariencia limpia y profesional, ideal para dashboards, aplicaciones empresariales y sitios corporativos.