React Redux: Mismo mensaje

Qué es Redux y cómo centralizar filtros como la sucursal en un panel de administración, evitando el prop drilling y manteniendo un único estado compartido.

26 sept 2025 • 3 min read • Q2BSTUDIO Team

Inteligencia-Artificial-

Recientemente me asignaron una tarea que me abrió los ojos al poder de Redux. La tarea era sencilla en teoría: disponer de un punto central para cambiar de sucursal en un panel de administración. El panel tenía varios componentes como Orders, Products y Stock Valuation y cada vez que un usuario seleccionaba una sucursal todos estos componentes debían mostrar solo los datos de esa sucursal.

Mi primera idea fue usar parámetros en la URL, por ejemplo /dashboard?branch=NairobiWarehouse. Esto funciona para un único filtro pero pronto se complica. Si luego añadimos filtros para fecha, estado o usuario la URL se hace larga y difícil de mantener. Aquí es donde Redux destaca.

Qué es Redux explicado de forma simple. Piensa en Redux como una nota en la nevera que cualquiera en la casa puede leer y actualizar. Esa nota siempre contiene la información vigente. En una aplicación React colocamos el filtro de sucursal en esa nota y todos los componentes pueden leerlo. Cuando alguien hace dispatch setBranch NairobiWarehouse el estado global cambia y todos los componentes suscritos se actualizan automáticamente.

Componentes clave de Redux en palabras llanas: store es la nota donde se guarda la selección actual de sucursal. Slice es una sección de la nota dedicada a un tema concreto, en este caso el filtro de sucursal; puedes crear más slices más adelante para usuario, tema u otros. Estado inicial es lo que aparece escrito al arrancar la app, por ejemplo selected null. Reducer son las reglas que definen cómo cambia la nota cuando se recibe una acción. Action es la instrucción que dispara ese cambio, por ejemplo dispatch setBranch NairobiWarehouse.

Cómo se usa en la práctica sin enredarse. Cuando el usuario selecciona una sucursal desde el panel se hace dispatch de la acción que actualiza la slice de sucursal. En cada componente que muestra datos, por ejemplo OrdersList o ProductsList, se usa un selector para leer state branch selected. Gracias a esa suscripción, si el usuario cambia de Nairobi a Kisumu todas las listas y el componente de valoración de stock vuelven a renderizar con el nuevo filtro sin tener que pasar props entre componentes.

Ventajas frente a otras aproximaciones. Redux evita el prop drilling y reduce la complejidad cuando la aplicación crece con muchos filtros. Mantiene un solo origen de verdad para el estado compartido y facilita tareas como persistencia del filtro, trabajo con middleware, o sincronización con servicios externos.

Si quieres aplicar estas ideas en proyectos reales Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en crear soluciones robustas y escalables. Desarrollamos aplicaciones a medida y software a medida optimizadas para experiencias empresariales y flujos de trabajo complejos, integrando patrones de estado como Redux cuando conviene.

Además complementamos el desarrollo con capacidades avanzadas de inteligencia artificial y servicios cloud. Si tu proyecto requiere modelos IA, agentes IA o soluciones de ia para empresas podemos integrar esos componentes con el flujo de estado de la aplicación y desplegarlos en arquitecturas seguras en la nube. Descubre nuestras propuestas de inteligencia artificial para empresas y cómo las combinamos con prácticas de desarrollo profesional.

Ofrecemos también servicios de ciberseguridad, pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y soluciones con power bi para que tus datos sean útiles y seguros. En proyectos donde la integridad del dato y la disponibilidad son críticos aplicamos buenas prácticas para que filtros compartidos, como la selección de sucursal, se gestionen de forma consistente y segura.

En resumen, usar Redux para centralizar filtros como la sucursal en un panel de administración simplifica la arquitectura, mejora la mantenibilidad y facilita la integración con otras capacidades como IA, análisis y cloud. Si buscas acompañamiento para implementar estas soluciones con un equipo experto en aplicaciones a medida, inteligencia artificial, ciberseguridad y cloud, en Q2BSTUDIO podemos ayudarte a diseñar e implementar la mejor estrategia para tu negocio.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat