React & Redux Toolkit - Bases y proyecto práctico

Summary

This tutorial offers an in-depth guide on managing global state in a React application using Redux Toolkit. It explains the benefits of using Redux for state management in large-scale apps and demonstrates a practical example, creating a React app from scratch. The process includes setting up the Redux store, configuring slices for state management, fetching data from an API, and displaying it in a component. The tutorial simplifies complex concepts, making Redux more accessible for developers.

Takeaways

• 😀 This tutorial teaches how to manage the global state of a React application using a tool called Redux Toolkit.
• 🔧 Redux Toolkit is an improvement over the older Redux, simplifying its use with React by reducing boilerplate code and verbosity.
• 🌐 The script discusses the problem of state management in large or scaling applications, where passing state through multiple components can be cumbersome.
• 📚 It explains the concept of a global state, which is a store that holds common information for various components, accessible directly without passing through props.
• 🛠️ The tutorial includes a practical example of writing code in a React application, demonstrating the flow of information from parent to child components.
• 📝 The process of creating a new React application using `create-react-app` and setting up the project structure is covered.
• 🔄 The script describes the use of `react-redux` and `@reduxjs/toolkit` for state management and handling asynchronous operations with Redux Thunk middleware.
• 🔑 The importance of actions and reducers in Redux is highlighted, with actions representing functions that carry new values and reducers updating the global state based on those values.
• 🔍 The tutorial includes a step-by-step guide on creating a `slice` for user management within the Redux store, including setting up initial state and reducers.
• 🌌 The video demonstrates fetching user data from an API and integrating it into the global state, making it available for any component to use.
• 🔬 The use of `react-redux` hooks like `useDispatch` and `useSelector` is shown for dispatching actions and selecting parts of the state, respectively.

Q & A

What is Redux Toolkit and why is it used?

Redux Toolkit is a tool used to manage the global state of a React application. It simplifies the use of Redux by reducing boilerplate code and making the code less verbose.

What problem does Redux solve in a React application?

Redux solves the problem of managing the state across various components, especially in large applications where passing state through props can become complex and unmanageable.

How does information flow in a React component tree?

In a React component tree, information typically flows from parent components to child components through props.

What issues arise when scaling a React application without Redux?

When scaling a React application without Redux, managing state through props becomes cumbersome. Passing state and functions through multiple levels of the component tree can lead to complex and hard-to-maintain code.

What is the benefit of creating a global state store in Redux?

Creating a global state store in Redux allows multiple components to access shared state directly, without having to pass data through multiple levels of the component tree.

What are some alternatives to Redux for state management in React?

Alternatives to Redux for state management in React include the Context API (included with React), MobX, and other state management libraries.

How did Redux Toolkit improve upon the traditional Redux approach?

Redux Toolkit improved upon the traditional Redux approach by reducing the amount of boilerplate code, making it easier to set up and use Redux with less configuration and verbosity.

What is the role of a reducer in Redux?

A reducer in Redux is a function that determines how the state of the application changes in response to actions sent to the store. It takes the current state and an action, and returns the new state.

What is a 'slice' in Redux Toolkit?

A 'slice' in Redux Toolkit is a specific part of the Redux state, along with the reducers and actions related to that part of the state. It is a modular way to manage different pieces of state.

How do you connect a React component to the Redux store?

To connect a React component to the Redux store, you use the `useSelector` hook to access the state and the `useDispatch` hook to dispatch actions. The component is also wrapped with the `Provider` component, passing the store as a prop.

Outlines

00:00

📚 Introduction to Global State Management with Redux Toolkit

The video begins with an introduction to managing global state in a React application using Redux Toolkit. It explains the concept of Redux, when to use it, and sets the stage for a practical example. The tutorial will cover the challenges of passing state through multiple components and the benefits of using a centralized state management approach.

05:04

🛠 Setting Up a New React Application

The script describes the process of creating a new React application using 'create-react-app' and setting up the project structure. It includes removing unnecessary files and modifying the 'App.js' and 'index.js' to simplify the project. The video also mentions installing necessary libraries and setting up a basic component structure.

10:04

🎨 Adding Styling and Components with Bootstrap

The paragraph details adding Bootstrap for styling the application. It includes creating a 'NavBar' component with branding and setting up classes for dark themes and layout. The script also covers importing Bootstrap and setting up a container for the application's main content.

15:05

🔍 Fetching User Data from an API

The tutorial moves on to fetching user data from a public API, explaining how to access and use endpoints to retrieve user information. It discusses the structure of the API response and how to select specific data points, such as user details including name, email, and avatar.

20:08

📝 Creating a Static User List Component

The script describes creating a 'UserList' component to display a static list of users. It includes setting up the component structure, using the 'map' function to iterate over users, and displaying user details like name, email, and avatar in a card layout.

25:08

🔄 Configuring Redux for State Management

This section delves into configuring Redux using Redux Toolkit to manage the application's state. It explains creating a 'store', setting up 'slices' for different parts of the state, and using 'configureStore' to initialize the store. The video also covers wrapping the application with a 'Provider' to make the store accessible to all components.

30:08

📚 Creating User Slice for Redux State

The tutorial focuses on creating a 'users' slice within Redux to manage user-related state. It involves using 'createSlice' from Redux Toolkit to define the initial state and reducers for handling state updates. The script also explains exporting the slice's reducer to be included in the application's global state.

35:10

🌐 Making Asynchronous API Calls with Redux

The script covers making asynchronous API calls to fetch user data and integrate it with Redux state management. It explains using the 'fetchUsers' thunk function to perform the API call and 'createAsyncThunk' to handle the asynchronous operation, updating the state with the fetched users.

40:11

🔧 Dispatching Actions to Update the State

This part explains how to dispatch actions to update the Redux state with the fetched user data. It details creating an action called 'setUserList' to handle the new user list and using the 'dispatch' function to execute the action, updating the state with the new user data.

45:13

🔄 Consuming Redux State in the User List Component

The final paragraph discusses consuming the Redux state in the 'UserList' component. It explains using the 'useSelector' hook to select the user list from the global state and displaying it in the component. The video concludes by emphasizing the simplicity of Redux Toolkit for managing state in larger applications.

Keywords

💡Redux Toolkit

Redux Toolkit is an enhanced version of Redux that simplifies state management in React applications. It reduces boilerplate code and streamlines the process of managing global state, making it easier for developers to focus on core functionalities. In the video, the instructor uses Redux Toolkit to manage state across a React application, highlighting its practical benefits.

💡Global State

Global state refers to a centralized state that is accessible by all components within a React application. This approach helps avoid 'prop drilling' and simplifies state management, especially in large applications. The video discusses creating a global store to hold shared data, enabling components to access necessary information without complex prop chains.

💡Prop Drilling

Prop drilling is the process of passing data through multiple layers of components in React. It can become cumbersome in larger applications where distant components need to share state. The video addresses this issue by demonstrating how Redux Toolkit allows for direct access to global state, bypassing the need for prop drilling.

💡Slice

In Redux Toolkit, a slice represents a portion of the state and includes reducers and actions related to that specific part of the state. Each slice simplifies state management by encapsulating logic for a particular domain. The video showcases creating a 'users' slice to manage user data, illustrating how slices help organize application state.

💡Reducer

A reducer is a function in Redux that determines changes to the application's state based on dispatched actions. It takes the current state and an action as arguments, returning a new state. In the video, reducers are used within slices to update the user list in the global state when data is fetched from an API.

💡useSelector

The useSelector hook allows React components to extract data from the Redux store's state. It simplifies state selection by providing a way to access specific parts of the state directly within a component. The video demonstrates using useSelector to retrieve the user list from the global state and display it in the user interface.

💡useDispatch

useDispatch is a hook that provides access to the dispatch function from the Redux store, allowing components to send actions. It is crucial for triggering state updates based on user interactions. The video uses useDispatch to dispatch actions that update the global state when fetching user data from an API.

💡Thunk

A thunk is a function that returns another function, commonly used in Redux for handling asynchronous operations. In the video, thunks are used to fetch data from an API, with the fetched data then being dispatched to update the global state. This approach allows for managing side effects in Redux applications effectively.

💡React Redux

React Redux is the official Redux UI binding library for React. It provides hooks and components that make it easier to connect React components to a Redux store. The video illustrates using React Redux's Provider to wrap the application, ensuring that all components have access to the Redux store.

💡Boilerplate

Boilerplate refers to the repetitive code necessary to set up a particular structure or framework. Redux Toolkit significantly reduces boilerplate compared to traditional Redux, simplifying the setup and reducing the amount of code required. The video emphasizes this reduction, making state management more straightforward and efficient.

Highlights

Introduction to managing global state in a React application using Redox Toolkit.

Explanation of Redux and when to use it for state management.

Practical example of writing code in a React application using Redox Toolkit.

Discussion on the challenges of passing state through multiple components in a large application.

Introduction of global state to solve complex state management issues.

Overview of different tools and libraries available for state management, including React's built-in context and Recoil.

Explanation of the simplification of Redux with the introduction of Redux Toolkit.

Demonstration of setting up a new React application using 'create-react-app'.

Step-by-step guide to installing necessary libraries for Redux in a React project.

Creating a header component with branding for the React application using Bootstrap.

Explanation of the structure and flow of information in a Redux application, starting from the user interface.

Description of actions and reducers in Redux and their roles in updating the global state.

Practical implementation of Redux in a React application to manage a shopping cart example.

Guide to creating a global state for user management in a React application using Redux Toolkit.

Integration of an external API to fetch user data and store it in the Redux global state.

Use of React-Redux's `useDispatch` hook to dispatch actions and update the global state.

Consumption of global state data in a React component using the `useSelector` hook.

Final demonstration of a fully functional user list component displaying data from the Redux global state.

Conclusion summarizing the benefits of using Redux for state management in large-scale React applications.

Transcripts

[Música]

hola en este tutorial aprenderemos a

gerenciar el estado de una aplicación de

react de manera global usando una

herramienta llamada red books toolkit

aprenderemos que es redux cuando usarlo

y desde luego haremos un ejemplo

práctico escribiendo algo de código en

una aplicación de react el flujo de la

información a lo largo del árbol de

componentes se da desde los componentes

padres hacia los componentes hijos y por

lo general el paso de la información se

hace a través de las próx es decir que

si yo quiero pasar el estado de este

componente hacia este otro tengo que

abrirme camino a través de las próx

hasta llegar ahí y si quiero pasar el

estado o varios estados de ese

componente tengo que pasar también las

funciones que modifican a ese estado y

eso para todos los componentes en una

aplicación pequeña esto es viable y con

certeza no nos va a dar tanto trabajo el

problema es cuando la aplicación ya es

grande o tiende a escalar imaginemos

entonces una aplicación un poco más

compleja como esta de aquí si queremos

por ejemplo pasar el estado desde este

componente hacia este otro de aquí

tenemos que dar toda una vuelta si lo

hacemos a través de las próx

y eso ocurre para todos los componentes

que comparten información entre ellos y

que se encuentran de ciertas formas

distantes en el árbol de componentes

cuando esto ocurre decimos que tenemos

un problema de gerenciamiento del estado

de la aplicación afortunadamente ese

problema ya tiene una solución y es

crear un estado global es decir un estor

que almacena el estado de la aplicación

el estado con todas aquellas

informaciones que son comunes para

varios de nuestros componentes y a la

cual de los componentes pueden accesar

directamente sin tener que dar tantas

vueltas a través de las propias y para

ayudarnos con esto existen varias

herramientas o bibliotecas que podemos

usar primeramente tenemos la apei con

text que viene incluida en la propia

biblioteca de rayak y de la cual les voy

a estar hablando en un próximo vídeo

luego tenemos a movex que también es una

herramienta bastante interesante y que

con certeza les voy a traer en un

próximo vídeo y finalmente tenemos a

redux o el antiguo redux por decirlo de

alguna manera el antiguo redux era algo

complejo de entender y de usar para

comenzar a usarlo teníamos que crear

mucho código de boiler plate

muchos archivos y eran bastante verbos

pero hoy en día existe una herramienta

llamada red uts toolkit que es de cierta

forma una mejora al antiguo redux y que

simplificó muchísimo la manera de usar

redux con react evitando mucho código de

boiler plate y también evitando la

verbosidad para que nosotros nos podamos

centrar o concentrar en desarrollar lo

que es importante para nuestra

aplicación y de preocuparnos por hacer

tantas configuraciones así que redux

toolkit es el que vamos a estar usando

en este vídeo con un ejemplo práctico

ahora vale la pena conocer un poco de la

estructura funcional de redux y todo

comienza en la interfaz de usuario vamos

a imaginar que esto de aquí es un

carrito de compras que como vemos está

en 0 productos pero el usuario lo quiere

actualizar a 10 productos digitando el

valor de 10 en este input eso entonces

genera un evento y ese evento va a

ejecutar un despacho que en la práctica

va a ser un juego llamado justice page

el cual viene incluido en una biblioteca

llamada react redux que estaremos usando

ese despacho entonces

es lanzar una acción que una acción no

es más que una función que toma ese

nuevo valor es decir el valor de 10 y se

lo pasa al reducir el reducir entonces

es quien se encarga de actualizar el

estado global de la aplicación basado en

un estado inicial es decir es el reducir

quién va a colocar ese nuevo valor en el

estado de la aplicación y luego de que

ha sido actualizado el estado global de

la aplicación entonces ya va a estar

disponible para que seleccionemos ese

estado a través de un selector que en la

práctica también va a ser un juego

llamado y un selector incluido en la

misma biblioteca de react redux que

estaremos usando entonces es el selector

lo que nos va a permitir es seleccionar

la parte del estado en el que estamos

interesados es decir en el valor de 10 y

lo vamos a refrescar entonces en nuestra

interfaz de usuario de esa manera ahora

nuestro carrito tiene un valor de 10 y

básicamente en eso consiste redux en

actualizar un estado global para que

todos los componentes que estén

suscritos a ese estado puedan reflejar

el nuevo

valor en la interfaz de usuario muy bien

ahora vamos a ver en la práctica cómo

podemos empezar a usar redux en una

aplicación de rea que vamos a hacer un

ejemplo bastante sencillo pero que nos

permita entender los conceptos que

acabamos de ver y bueno para eso debemos

partir de una nueva aplicación de rayak

así que bueno yo en mi caso la voy a

colocar en la carpeta de documents y ahí

voy a decirle que quiero crear una nueva

aplicación de riego usando create react

up y bueno el nombre que le voy a dar a

esta aplicación va a ser en este caso

rayak redux algo como así redux el guión

up algo de esta manera voy a dar un

enter y se va a comenzar a crear la

aplicación esto tal vez demore un

poquito así que voy a pausar el vídeo y

cuando se haya creado la aplicación yo

vuelvo aquí luego de que ha terminado de

crear la aplicación lo que voy a hacer

es entonces ir hasta la carpeta de esa

aplicación y estando ahí voy a ejecutar

el comando con espacio punto simplemente

para abrir ese proyecto con visual

studio code miren que aquí bueno ya me

está abriendo el proyecto y este

proyecto que tengo aquí es

proyecto base que es creado con el

comando create ya que es realmente el

típico demo que viene con ese comando

así que bueno aquí voy a tener una serie

de archivos que no voy a necesitar así

que los voy a eliminar para que

simplemente el proyecto quede un poco

más limpio bien todos estos archivos que

estoy seleccionando simplemente los voy

a adelantar porque no los necesito y voy

a dejar simplemente el archivo de app

punto js index puntos totales aquí en

index punto está s

voy a limpiar también algunas cosas

estoy aquí no lo necesito esto de aquí

lo voy a remover este importe también y

sólo voy a dejar esto de esta manera muy

bien aquí voy a cerrar este index y en

el archivo de app

js también voy a realizar algunas

modificaciones esto de aquí por ejemplo

no lo necesito así que lo voy a quitar y

aquí por ahora tal vez también voy a

remover esto de aquí voy a colocar

simplemente un h1 que diga por ejemplo

react

returns o algo así muy bien voy a

guardar esto de aquí y lo que voy a

hacer entonces es abrir una nueva

terminal y bueno tal vez debería

ejecutar la aplicación para ver esto

aquí pero bueno yo voy a empezar de una

vez

instalando las bibliotecas que voy a

necesitar todas las bibliotecas que

necesito para esto así que lo que voy a

hacer aquí es usar jiang tu puedes usar

npm install pero bueno yo voy a estar

usando ya at y lo que voy a hacer es

entonces e ir tal vez aquí a

documentación de redux toolkit para ver

un poco de lo que necesito y como puedo

comenzar miren que aquí en reduction

toolkit punto está ese punto o hereje

entramos a la página oficial de redux

toolkit aquí en get started vamos a

tener algunas instrucciones de cómo

comenzar por ejemplo aquí tenemos que

nos dicen que podemos inclusive crear

una aplicación con criteria up y usar un

template de redux tanto para javascript

plano o javascript puro como para

en este caso pues yo les voy a mostrar

cómo hacerlo desde cero sin usar el

template pero bueno aquí entonces vamos

ahora a ir a la parte de quick start y

aquí bueno ya nos van a dar algunas

instrucciones de cómo comenzar realmente

a configurar redux bien que aquí nos

dicen que debemos instalar estas dos

bibliotecas de aquí que es la biblioteca

de redux js barra toolkit y la

biblioteca de riad critics así que voy a

copiar estas dos bibliotecas de aquí

realmente y las voy a traer aquí voy a

colocar y entonces ya como te dije tú

puedes usar npm install y bueno también

voy a instalar otras dos bibliotecas que

ya están usando una es actions que me va

a permitir hacer las llamadas de red es

decir consultar alguna ave y también voy

a estar usando bus trap para estilizar

la aplicación así que simplemente voy a

decirle aquí que es buscar action riad

grid books y rick perry books js barra

toolkit estas son las bibliotecas que

voy a estar usando cuidar un enter y se

van a comenzar a crear aquí sólo debemos

esperar un poco pero bueno

esperamos ya podríamos ir creando

algunas cosas no entonces por ejemplo

aquí en la carpeta de src yo voy a crear

una nueva carpeta llamada componentes en

donde voy a colocar nuevos componentes

que voy a estar creando y bueno un

primer componente de hecho va a ser una

especie de navegación o al menos de un

header con el brand para que la

aplicación no quede tan simple entonces

aquí voy a colocar un perdón index punto

a está ese no voy a colocar un archivo

llamado mad bar punto j es perfecto y

aquí bueno voy a usar un snippets de

riad que es el área

fcc para crear una estructura aquí del

componente y esto me crea esta parte de

código bueno miren que aquí ya se

instalaron las bibliotecas vamos a

verificar aquí en el path cage y jason

hemos instalado vustra hemos instalado

el jack reed ox hemos instalado action y

aquí en red uts js tool kit muy bien

entonces tenemos las bibliotecas

instaladas bueno sigamos aquí entonces

yo estaba creando este hardware de aquí

para poder demostrar el brand de la

aplicación y que no quede tan simple de

hecho ya es simple la aplicación

entonces sólo para que se muestre un

poco mejor bien entonces aquí que es lo

que voy a hacer bueno vamos a colocar

aquí el paréntesis perfecto y aquí

dentro de estos paréntesis lo que va a

retornar es un componente en up muy bien

y dentro un componente dif y dentro un

componente del tipo y muy bien aquí esta

preferencia va a ser hacia el home por

la ruta principal y bueno aquí vamos a

colocar algunas clases de booster no

entonces por ejemplo bueno de hecho voy

a comenzar por el comienzo aquí voy a

colocar que una clase llamada network

que también otra clase llamada nad bar y

el tema dark y de background también

vamos a colocar aquí dark muy bien y

esto sólo para darle un poco de estilo

aquí vamos a usar otra clase de bus trap

llamada container y aquí vamos a usar

entonces una clase de booster llamada

lavar brand estas son clases típicas en

un brand con busta aquí le voy a colocar

por ejemplo entonces lo que tengo allá

en él

en el h 1 voy a quitar esto de aquí de

hecho y lo voy a colocar justo aquí muy

bien pero bueno para que estas clases de

bus trap funcionen realmente yo tengo

que importar booster porque lo instalé

pero no lo estoy importando así que aquí

en el index punto j s yo necesito hacer

es donde yo voy a colocar aquí un

comentario que diga vustra y aquí voy a

colocar un importe y vamos a importar

booster bueno como podemos importar

vuestro bueno colocamos entonces aquí

mostrar que es el módulo que instale

barra vista una carpeta que está aquí

dentro barra css barra y el archivo

llamado bus track

vuestros ss

y tener que escribirlo de hecho miren

que aquí lo podemos ver en la carpeta de

not models si buscamos aquí por booster

podemos haber instalado

a ver aquí por aquí

aquí debe estar babylon browser

por aquí debería estar buscan aquí justo

aquí entonces está vuestra list css y

aquí debería haber un archivo llamado

booster css miren no es este de aquí

entonces si está ahí así que lo voy a

llamar entonces kivus trump

punto cesc es muy bien perfecto de esta

manera entonces ya lo habremos importado

cerramos aquí y estas clases de bustra

ya estarían funcionando muy bien

entonces aquí ya no vamos a necesitar

este h1 lo que voy a hacer es importar

es en ámbar que cree lo seleccionado

aquí y el llama no importa que

automáticamente muy bien perfecto aquí

vamos a cerrar esto doy un control ese y

ahora voy a abrir la terminal de nuevo

aquí voy a limpiar esta terminal un poco

y vamos a dar entonces un hard start

perfecto para iniciar la aplicación

bueno entonces aquí ya se me debería

iniciar la aplicación debería estar

iniciando uno iniciado bueno mientras

tanto entonces qué podemos bueno aquí de

hecho ya ya que iniciando pero bueno

aquí mientras tanto podemos seguir

haciendo algunas cosas de hecho voy a

cerrar esta carpeta de móviles perfecto

aquí yo lo que quiero realmente crear

como aplicación es una simple lista de

usuarios pero que esa lista de usuarios

quede en el estado global de la

aplicación con redux entonces voy a

tener un componente que

lista a esos usuarios esos usuarios los

voy a traer desde una buena de hecho

miren que aquí ya la aplicación inicio y

miren la estamos viendo aquí tenemos un

hardware aquí bien simple sólo con el

brand y aquí yo quiero crear entonces

una lista de usuarios estos usuarios y

los vamos a traer desde una app que es

una app gratuita llamada red red punto y

si ustedes entran aquí la pueden ver en

internet está un poco lento así que está

demorando aquí para mostrar las cosas

pero miren que aquí bajamos y tenemos

todos los endpoints que podemos usar de

esa pei para obtener todos los usuarios

una lista de usuarios de hecho podemos

explicar aquí y miren que este sería el

en point que podemos usar bueno le

podemos pasar parámetros por ejemplo que

me está diciendo que la página 2 nos va

a traer los usuarios de la página 2 y yo

clico aquí me muestra esos datos de la

ape y miren esta estructura de datos de

la ape y con bueno algunos parámetros

aquí y una red llamado deira que va a

tener dentro objetos cada objeto es un

usuario con haití email

nombre apellido y un avatar que es la

imagen bueno si usted no están viendo la

estructura de la pei de esta forma

probablemente porque no tengan esta

extensión llamada jason viewer que yo

tengo instalada aquí ustedes tal vez la

estén viendo así y si ya la tiene

instalada entonces la están viendo de

esta manera muy bien entonces qué es lo

que yo puedo hacer aquí por ejemplo le

puedo decir que bueno miren que aquí

tiene un total de 12 usuarios y sólo

sólo dos páginas estamos actualmente en

la página 2 y está mostrando 6 usuarios

por página entonces aquí está desde el

usuario 7 hasta el 12 porque está en la

página 2 pero yo le puedo decir aquí

camps que quiero otro parámetro entonces

aquí por ejemplo le puedo decir que

quiero el parámetro de usuarios por

página y le puede ser que me muestre 12

usuarios es decir todos los usuarios que

tienen la pei que son 12 que me los

muestra todos entonces miren desde el 1

hasta el 2 muy bien ahí ya tengo los dos

usuarios entonces éste en cuenta es el

que voy a estar usando para obtener esos

usuarios pero bueno a principio

yo lo que voy a hacer es que me voy a

llevar tal vez unos tres usuarios de

aquí o cuatro usuarios

los voy a llevar así de manera que voy a

copiar y le voy a colocar que de manera

fija no lo voy a colocar de manera fija

pero bueno para eso voy a crear también

otro otro componente como les dije no lo

he creado entonces no lo voy a pegar

estos usuales todavía aquí voy a crear

primero el componente ese componente se

va a llamar y user list de lista de

usuarios

js muy bien aquí vamos a usar el snipe

de la fcc que me crea aquí la estructura

perfecto y aquí dentro de este

componente es donde voy a crear aquí una

constante llamada users que va a ser

igual a un rey y dentro de la raíz voy a

colocar esos usuarios que copie de ella

que van a estar fijos por ahora ellos

están fijos muy bien ahora qué es lo que

quiero hacer aquí dentro este componente

bueno quiero listar a cada uno de esos

usuarios y mostrarlos en la interfaz de

usuario esto de aquí hasta ahora sería

básicamente crear la estructura de la

aplicación no hemos hecho nada con redux

pero ya lo vamos a hacer

primeramente entonces vamos a colocar

aquí lo bueno vamos a dejar el sedif

realmente y vamos a colocarle una clase

de bustra llamada container

container muy bien dentro vamos a

colocar aquí otro dif y le vamos a

colocar también una clase de bus trap

que va a ser la clase road para crear

una fila y bueno dentro de esa fila

entonces van a ver columnas en cada

columna va a haber una tarjeta con un

usuario esa es la idea pero entonces yo

necesito integrar a esos usuarios

entonces como yo los usuarios los tengo

aquí users los puedo integrar a través

de la función map esa función map

entonces tiene aquí dentro una función

que le voy a colocar que un rector

implícito y dentro va a tener entonces

un 10 y bueno ese dif a ver lo

completamos aquí

perfecto y ese día va a tener una clase

de buscar

qué es una columna con md y le vamos a

decir qué bueno que aquí por ejemplo sea

3 para que muestre 44 usuarios en por

cada fila no en pantalla normal de esta

pantalla que estoy usando muy bien

ahora esto de aquí entonces recibe a un

usuario y también recibe puede recibir

aquí un index no así que bueno ese index

de yo lo puedo usar en derecho para

colocar aquí el kit entonces aquí

colocamos index también podríamos usar

el aire de cada usuario aquí como aquí

pero es vamos a usar el indus recuerden

que el kiel siempre lo colocamos cuando

es un componente que va a ser repetido

varias veces dentro de una integración

muy bien y aquí vamos a colocar dentro

otro 10

con otra clase de gusta como les dije

aquí al principio solo estamos armando

la estructura de la aplicación aquí esto

va a ser un kart y dentro de secar vamos

a tener por ejemplo una imagen

esa imagen entonces va a ser el avatar y

aquí nosotros vamos a colocar qué

realmente la url de esa imagen va a ser

el avatar de cada usuario entonces cada

usuario tiene aquí una propiedad llamada

avatar perfecto

bueno aquí podemos de una vez agregar

algo más podemos agregar otro 10 con el

cuerpo vamos a colocar que una clase de

bus trap que va a ser el cuerpo harvad y

el cuerpo de esa tarjeta y nos vamos a

mostrar a cada usuario y aquí vamos a

colocar un h5 que tenga entonces por

ejemplo el nombre e incluso el apellido

entonces vamos a colocarlo aquí en un

string en la forma de template vamos a

decirle que me coloque aquí por ejemplo

a user punto

first a ver fierce name perfecto y que

aquí deje un espacio y luego coloque a

ver el símbolo de dólar y recuerden que

aquí estamos usando strings como

templates entonces yo puedo colocarlos

de esta manera muy bien aquí sería las

name muy bien y aquí debajo podemos

colocar inclusive un parágrafo y este

parágrafo

bueno aquí tendría entonces el el email

colocamos aquí y usher punto email muy

bien esto también lo podemos colocar

aquí en la clase de buster llamada card

esta carta

carthage y aquí está este h 5 vamos a

colocarle también clases de buscar para

que quede bien y le colocamos aquí un

carl tyson

perfecto entonces si yo guardo esto de

aquí si guardo los cambios y voy a mi

aplicación miren qué bueno de hecho no

me está mostrando aún nada porque no lo

he importado no debe importarlo aquí

entonces vamos a decirle que quiero a el

componente de user list

a ver bien que le importa

automáticamente esto de aquí lo podemos

solucionar este error lo podemos

solucionar colocando un

fragmentos justamente aquí porque no

podemos retornar varias cosas desde un

retorno entonces aquí solo debemos

retornar una cosa así que colocamos un

fragmento ahora si se fue el error y

miren que aquí ya me está mostrando esos

cuatro usuarios que coloque fijos el

nombre el apellido y el email muy bien

eso lo estamos haciendo de manera fija

aquí pero qué es lo que yo quiero hacer

bueno yo lo que quiero hacer realmente

es una llamada de red o una consulta a

esa p y que sus datos de esos usuarios o

sea esta lista de usuario que coloque

aquí fija quiero que se guarden en un

estado global ni siquiera en el estado

del componente quiero que se guarden en

el estado global va a ser muy simple una

aplicación muy simple pero es para hacer

el ejercicio de entender cómo funciona

redux entonces que lo que vamos a hacer

vamos a comenzar a configurar redux para

poder hacer la llamada de red obtener

estos datos de los usuarios y colocarlos

en el estado global de la aplicación y

luego consumir esos datos desde ese

estado global de la aplicación entonces

muy bien aquí vamos a venir a el src

creamos

una nueva carpeta yo lo voy a llamar

store

algunos la suelen llamar redux yo la

llamo store pero bueno sólo depende de

cada uno y dentro de estorbo ya colocar

un archivo llamado index punto j es y

aquí es donde voy a configurar la store

entonces qué es lo que voy a decirle

bueno quiero decirle que aquí quiero

importar primeramente tengo que

configurar la store no entonces para eso

tengo que importar desde redox toolkit

desde la biblioteca que instalamos

quiero importar una función llamada

configure store para configurar las

tornas muy bien y luego tengo que

simplemente usar la configurar store

bien esto de aquí recibe un objeto

y ese objeto recibe o debe tener un

reducir

y se reduce también es un objeto y este

reducir de aquí realmente va a ser un

reducir formado por muchos otros reduce

es que ya crearemos para cada parte del

estado de la aplicación que nosotros

queramos por ejemplo yo puedo crear un

reducir para usuarios otros reduce para

productos otro reducir para facturas

etcétera no dependiendo de los dominios

que tenga mi aplicación yo creo parte

del estado de la aplicación de esa forma

y luego los uno a través de un único

reduce que es el reduce de el de la

start o del estado global no entonces

miren que aquí básicamente con esto ya

la he configurado pero bueno debo

entonces exportar debo exportar este

está store que estoy configurando aquí

así que le voy a decir simplemente que

las porte como un default

la exporta aquí perfecto guardamos los

cambios y con esto ya la habremos

configurado bastante sencillo sin tantas

líneas de código antes con el ruido es

antiguo teníamos que realizar muchas

configuraciones aquí ahora ya no hacemos

tanta cosa ahora necesito entonces

pasarle esa store a todos los

componentes de la aplicación y eso lo

tengo que hacer a través de un provider

y bueno ya la biblioteca de read extrae

un componente provider entonces

simplemente lo debo usar aquí entonces

en el componente up

simplemente le voy a decir que aquí va a

estar lo de read ocs y voy a importar

o importar ese provider desde la

biblioteca de riac redux que también

habíamos instalado entonces aquí

simplemente voy a decirle que quiero el

componente provider este provider es un

componente así que simplemente lo voy a

usar y lo voy a colocar aquí por ejemplo

él debe estar arropando como el es un

rapper es un componente wrapper es un

provider tiene que estar arropando todos

los componentes que nosotros queremos

que tengan acceso a la store es decir al

estado global

entonces ese provider va a estar

arropando los dos componentes que

nosotros tenemos aquí y aquí store

simplemente va a estar es una propiedad

que le pasamos al provider y que va a

tener aquí como valor el store que

nosotros deberíamos estar importando una

inclusión no lo importado todavía así

que lo voy a colocar aquí import store

lo voy a importar desde el store que

acabe de crear aquí está en la carpeta

store así este store lo puedo usar aquí

pasársela aquí que es este de aquí

perfecto guardamos y con eso entonces ya

habremos configurado la store y ya la

estamos pasando a través del provider al

resto de la aplicación muy bien que

guardamos los cambios y ya no tendríamos

que hacer más nada aquí entonces ahora

lo que debemos hacer es comenzar a crear

nuestros reduce de cada parte del estado

de la aplicación y para eso yo voy a

volver aquí a la carpeta store y voy a

crear una nueva carpeta dentro llamada

slice est

esto lo puedes llamar tú de la manera

que quieras pero bueno yo por convención

voy a colocar esa carpeta aquí en slice

es y dentro yo suelo colocar una carpeta

para cada dominio de cierta forma cada

dominio del estado entonces por ejemplo

yo voy a tener un slice o un reducir

para el usuarios entonces yo creo dentro

una carpeta llamada users y dentro de

esa carpeta voy a tener un archivo index

punto gota es

este yo puedo tener varios reduce el si

para bar para cada reducir en mi caso

bueno yo crearía una carpeta para

separarlos de esa forma pero tú lo

puedes estructurar de la manera que

mejor te parezca muy bien entonces aquí

dentro de ese archivo index punto está

ese yo necesito crear un nuevo slice en

redux toolkit son llamados slice esas

partes que podemos tener del estado es

decir una parte para los usuarios una

parte para productos etcétera

eso se llama slice o una capa que sería

básicamente una parte del estado

entonces necesito crear un slice para

los usuarios entonces aquí lo que hoy yo

le voy a decir es que tengo que importar

desde la biblioteca de redux toolkit

una función que se llama create a ver

create slice este de aquí perfecto y con

eso voy a crear un slice así que la

tengo que usar avisar aquí create slice

y esto de aquí también recibe un objeto

y ese objeto va a tener una serie de

opciones lo primero que va a tener o de

propiedades lo primero que va a tener es

un nombre es el nombre que yo le voy a

dar a ese slice entonces yo lo voy a

llamar por ejemplo en este caso users

ahora así es como me voy a referir a él

dentro del estado y también va a tener

un estado inicial en el state y esto va

a ser un objeto el estado inicial es

como arranca mi aplicación en cada para

cada parte del estado no entonces yo por

ejemplo lo que voy a tener es una lista

de usuarios aquí en los usuarios voy a

tener una lista de usuarios y como

arranca esta lista bueno si es un array

arranca vacío luego lo voy a llenar con

los usuarios que yo traiga desde la

consulta de la japay perfecto y por

último lo que voy a tener es un reduce a

unos reduces porque podemos tener varias

entonces aquí esto también va a ser un

objeto por ahora no voy a crear ninguno

luego ya podemos empezar a crear algunos

reduce es aquí básicamente es esto de

aquí esto entonces yo lo tengo que lo

tengo que exportar de aquí

a exportar y lo tengo exportar en una

constante que le tengo que colocar un

nombre no entonces le voy a colocar por

ejemplo user slice se le suele colocar

la palabra slice porque es algo bien

slice porque es un slice que que estamos

creando una parte del estado no muy bien

ahora qué es lo que vamos a hacer bueno

tenemos que también exportar inclusive

lo voy a exportar como default aquí

exportar como default vamos a exportar

el reduce de este slice para poderlo

agregar donde poderlo agregar aquí en

nuestra en nuestra state o en nuestra

estoy aquí porque como les dije el

reducir de nuestra store que es único

está formado por varios reducirse y esos

reducir vienen de cada slice que creemos

que cada slice es una parte de nuestro

estado

aquí yo creo un slice solo para la parte

de usuarios entonces voy a exportar aquí

de ese slice el reducir no entonces aquí

yo lo llamé y usher y usher slice punto

reduce entonces el reducir de este slice

lo voy a exportar y eso lo tengo que

importar aquí para poderlo agregar a los

reduce desde aquí así que aquí le voy a

decir que voy a tener los reduce y como

sólo tengo uno pues voy a importarlo se

llama y usher hoy users y lo voy a

importar desde la carpeta de slides y

users perfecto y simplemente agregó stay

users aquí

muy bien con eso entonces ya habremos

agregado el slice day users a la store o

al estado global y eso pues ya sabemos

que está siendo pasado a todos los

componentes que tenemos en la aplicación

a través de éste provider muy bien que

es lo que necesitamos hacer ahora bueno

necesitamos hacer la llamada de red que

trae los usuarios o la consulta que trae

los usuarios y bueno sólo podemos hacer

incluso aquí dentro del mismo archivo de

redux reid ox entonces nos ayuda mucho a

organizar eso también porque podemos

hacer las llamadas de red aquí dentro

que son realmente operaciones asíncronas

que son tratadas por redux a través de

un middleware el millwall que trae por

defecto es un middleware llamada llamado

redux bank tenemos varios redox down

redux saga pero él redux down es el que

trae por defecto ya configurado en la

biblioteca de redux toolkit antes antes

lo teníamos que configurar nosotros

mismos en el redux antiguo pero aquí ya

eso queda bordes

si tú no te preocupas por crear todo ese

código de wyler plate así que bueno

entonces lo que vamos a hacer es crear

aquí dentro esas funciones que van a

ejecutar operaciones and síncrona como

las consultas a la api entonces aquí yo

voy a crear una función llamada por

ejemplo fecha

al users es decir la que va a traer a

todos los usuarios y esto de aquí

simplemente va a ser un road function

esa road function aquí va a retornar

otra función o debe retornar otra

función

entonces aquí esto lo que debe hacer es

retornar

otra función de esta manera perfecto

pero bueno esto de aquí si el retorno a

una función de esta manera y no tenemos

más código que colocar aquí podemos

evitar colocar el return y dejarlo de

esta forma así bueno vamos a quitar esta

llave que estas tareas sobrando y

perfecto de esta forma puede quedar

ahora que es lo que vamos a hacer aquí

la llamada de red y bueno o la consulta

no al papel y cómo lo hacemos bueno para

eso tenemos que usar action que fue la

biblioteca que yo instale aquí para eso

action entonces lo vamos a importar aquí

como action desde la biblioteca access

perfecto y ese action entonces me va a

permitir por ejemplo ejecutar un método

http del tipo get para traer alguna cosa

y donde lo vamos a traer bueno de la

play que les había acabado de mostrar de

esta de aquí vamos a copiar esta url que

me trae los dos usuarios disponibles en

esa pay y los vamos a colocar aquí

dentro de estas comillas y bueno como

esto de aquí que es una operación

asíncrona entonces va a retornar una

promesa y esa promesa la podemos tratar

puede ser aquí mismo la podemos tratar

con un then si todo sale bien entonces

esto va a tener aquí una respuesta

response y aquí vamos a ver qué hacemos

con esa respuesta pero si no así ocurre

un error también entonces podemos aquí

recibir

un error y ese error también lo

podríamos tratar pero aquí bueno nos

vamos a poner a tratar los errores

simplemente vamos a decirle que lo

queremos por ejemplo imprimir por

consola caso ocurre alguna cosa voy a

dar aquí un control chispa y a formatear

el código complete yo que es una

extensión que tengo instalada aquí en

visual studio code para formatear el

código muy bien entonces aquí si todo

sale bien voy a tener una respuesta que

trae un cuerpo llamado deira y ese deira

me trae todos estos datos de aquí

entonces dentro de ese deira va a estar

este de irak que serían los que sería la

raíz de los usuarios

yo voy a ignorar estas otras

informaciones sólo quiero el array de

irak entonces qué sucede que nosotros

aquí vamos a tener que la respuesta trae

a neira que es el cuerpo de datos y ese

deira dentro trae otra propiedad de ira

que sería el array con los usuarios pero

muy bien que lo que nosotros queremos

hacer con este reino esa lista de

usuarios bueno queremos colocar

en el estado global aquí está el rey que

está vacío aquí de la lista lo queremos

alimentar con esos usuarios que vienen

de la consulta y cómo hacemos para pasar

esto desde aquí hasta aquí bueno para

eso nosotros vamos a tener que usar unas

acciones que están dentro de los

reductos porque porque bueno esto de

aquí incluso podrían no estar en este

mismo archivo yo lo estoy colocando aquí

porque queda mejor pero esto de aquí

incluso podría estar fuera en otro

archivo podría ser un request que está

siendo hecho desde el propio perdón

desde el propio componente y usher list

tal vez usando un giuseppe que lo

podríamos colocar todo aquí entonces

para poder mandar esos datos desde allá

hasta aquí necesitamos un medio de

comunicación y ese medio de comunicación

es una función llamada action que está

dentro del objeto de los reduce entonces

yo voy a crear una acción para eso le

voy a llamar set y usher list porque él

va a aceptar la lista de usuarios aquí

en el estado

en el estado de la aplicación entonces

esto de aquí es una función

yo creo que la función y esa función que

recibe primeramente recibe el state es

decir este estado de aquí lo recibimos

aquí y además de eso también recibe una

acción bien que es lo que va a suceder

aquí que nosotros vamos a usar ese state

punto miren que aquí me aparece list es

decir esta lista de aquí a esa lista yo

la quiero ser igual al nuevo valor el

nuevo valor que es bueno la lista de

usuarios que nosotros vamos a obtener

desde la consulta y que la queremos

pasar acá entonces dónde viene esa lista

de usuarios viene en el action el action

tiene una propiedad llamada pay load

este de aquí y es el pay lo va a traer

los datos la lista de los nuevos datos

el listo de usuario que sería en este

caso que será el nuevo dato que nosotros

queremos colocar en el estado

miren aquí entra en lección y el estado

el estado va a recibir y el action es lo

que está llegando como un dato nuevo

ahora sí nosotros podemos usar este este

acción de aquí para poder pasar la

respuesta hacia acá pero bueno para eso

nosotros tenemos que exportar esta

acción de aquí para que ella quede

visible a lo que está por fuera de los

reduces entonces aquí yo le voy a decir

que quiero exportar

que conste vamos a desestructurar esto

desde el user slice

desde aquí desde las acciónes él va a

tener unas secciones que son estas que

están dentro del objeto de reducir y

aquí entonces yo quiero exportar a la

que se llama set y usar list esta de

aquí ahora sí entonces como la estoy

exportando y ya queda visible a esta

función de aquí y la puedo usar justo

aquí sets y usher list y bueno qué le

voy a pasar aquí le voy a pasar entonces

response

la respuesta trae un cuerpo de datos y

ese cuerpo de datos va a traer dentro un

array que también se llama their

perfecto pero esto de esta manera no nos

va a funcionar solamente así porque

porque tenemos que usar un despacho o un

despacho en este caso que es quien se

encarga de ejecutar a la acción' los

dispatcher son los que ejecutan las

acciones y donde entre ese despacho

aquí entra como un parámetro en esta

función lo vamos a llamar aquí dispatch

él entra aquí y de esa manera entonces

yo lo puedo usar justo aquí dispatch

es una función y dentro entonces le paso

la acción que quiero ejecutar de esta

manera ahora si nosotros estaríamos

ejecutando esta acción que simplemente

recibe los datos que vinieron desde la

consulta a la pei y se los pasa aquí

a esta acción entran en el en la

propiedad de pay lloyd y sp y love está

siendo asignado al estado de lista es

decir quedan guardados aquí si nosotros

guardamos aquí y refrescamos aquí

nuestra aplicación vamos a tener los

usuarios que estaban desde el inicio

ahora quienes subieron les sugiero que

instalen otra extensión llamada redux de

tools aquí en google chrome esta

extensión llamada redux de tools esa

extensión los que les va a permitir ver

el estado de la aplicación aquí en

inspeccionar si yo doy clic derecho

inspeccionar me va a parecer una pestaña

ahora aquí llamada redux miren que esta

pestaña me deja ver varias cosas me deja

ver la acción que se está ejecutando me

deja ver el estado la diferencia entre

el estado anterior y el nuevo en donde

entre otras cosas entonces lo que más me

interesa es el estado miren que en el

estado ya me dice que está usuarios y

users tengo un slice en el estado

llamado you ser no tengo más nada sólo

ese y dentro de ese estado pues slice

tengo la lista de usuarios que está

que está vacía pero ya se debería estar

llenando porque realmente nosotros ya

estamos haciendo la llamada a la peli e

intentando llenarla pero porque no se

está llenando buenos y nosotros volvemos

aquí

no se está llenando porque esta función

que es la que hace la llamada no la

estamos llamando en ningún lado debemos

ejecutarla en algún lado donde la

ejecutamos bueno en el componente que le

interesa que se que se consulten a los

usuarios y cual componente es ese el de

la lista de usuarios este de aquí

entonces qué sucede que yo no voy a

necesitar más estos usuarios estáticos

que estaban aquí voy a quitar

y voy a dejar el array aquí vacío por

ahora aquí entonces aquí dentro yo

necesito ejecutar

esta función de aquí fecha al users que

me trae a todos los usuarios pero como

eso es una operación que es asíncrona

nosotros tenemos que tratar eso como

efectos colaterales con un giuseppe que

ya habíamos visto eso antes así que aquí

yo voy a importar a news effect

y lo voy a usar por aquí voy a usar de

hecho voy a aprovechar aquí el

[Música]

aquí el sniper que me crea ya toda esta

estructura por ahora no lo voy a dejar

nada de aquí de dependencias y aquí voy

a quitar todo esto y qué es lo que voy a

hacer aquí bueno voy a ejecutar esa

función pero la tengo que importar así

que aquí voy a colocar todo lo que es de

redux voy a importar una función desde

el slice que está en la carpeta de store

slice y users

perfecto desde ahí qué es lo que quiero

bueno quiero la función llamada fecha al

users y esta fecha al users la voy a

ejecutar aquí

coloquemos la de esta manera yo guardo

pero se van a dar cuenta de que a pesar

de que se está ejecutando aquí no nos va

a traer los datos bueno aquí ya no

aparecen los usuarios porque los

quitamos si yo voy aquí inspeccionar y

voy a enel redux en el estado miren que

aún mi lista sigue vacía no se ha

llenado con los usuarios porque a pesar

de que estoy ejecutando esto de aquí no

se está llenando con los nuevos datos

porque realmente esto de aquí necesita

ser ejecutado por un despacho nuevamente

necesitamos un despacho aquí y como lo

obtenemos bueno usando la biblioteca

que habíamos instalado llamada react

redux esa biblioteca y entonces nos va a

haber aquí redux nos va a proporcionar

algunos looks

el primer hooks es llamado just dispatch

stage dispatch lo voy a colocar por aquí

él va a retornar una función yo lo voy a

llamar la voy a colocar quien está

constante llamada this page aquí news

dispatch mandó ejecutar aquí el hook que

me retorna a la función que queda en

esta constante que llame dispatch y ese

despacho entonces es una función que voy

a colocar aquí dispatch y ese despacho

es el que ejecuta a ésta

esta función de fets alias ers ahora sí

sí yo guardo aquí los cambios bueno aquí

me está marcando algo aquí el criterio y

es porque bueno ya que me está exigiendo

como dependencia al despacho a la

función dispatch así que se la voy a

colocar aquí para mantenerlo contento

solamente guardo los cambios y miren que

se ahora yo vengo aquí a mi aplicación

que sucedió y ahora el state de la

aplicación

se llenó con los usuarios tenemos el

estado de joseph la lista y aquí está la

lista de los 12 usuarios que están que

vienen de la pei y cada uno con sus

datos estamos entonces

usando linux en una aplicación de una

manera bastante sencilla pero miren en

este caso lo que estamos haciendo

entonces es realizar una llamada a una

para una consulta y colocando esos datos

de esa consulta los estamos colocando en

el estado global de la aplicación

muy bien ahora qué es lo que sucede qué

bueno que aquí en la aplicación no

tenemos nada por qué porque no estamos

consumiendo esos datos desde el estado

global de la aplicación así que ahora

vamos a cerrar de cierta forma el ciclo

hasta ahora solo llevamos los datos

hacia el estado global ahora los debemos

consumir desde allá por cualquier

componente que lo necesite en este caso

como es una aplicación bien sencilla

quién los va a necesitar es el mismo

componente de user list pero bueno como

hacemos eso para eso tenemos que usar

otro book que viene aquí en esta

biblioteca llamado ius el lector es

ellos el lector no va a permitir

entonces tomar parte del estado de la

aplicación y bueno yo y de hecho usar

aquí el snipe y el selector y el jean

auto completa miren que él va a colocar

aquí lo que yo quiero obtener desde el

estado miren aquí ejecutó el fuck you

selector y eso aquí tiene una función

dentro un corvette que recibe el estado

de la aplicación todo el estado entero

pero de ese estado yo puedo tomar parte

solamente una parte de lo que yo

necesite yo necesito aquí es la parte de

los usuarios es decir el slice de users

que yo tengo aquí este de aquí y users

perfecto y ese users inclusive él tiene

algo específico que yo quiero aquí que

es la lista es solamente aquí tiene la

lista y yo pues voy a desestructurar

esto que está siendo retornado aquí

lista entonces qué sucede qué bueno

ahora aquí yo de hecho puedo quitar este

users de aquí no necesito pero aquí me

tocaría colocar list ahora si no quiero

colocar list y dejar de ser yo puedo

renombrar este list que estoy trayendo

de aquí lo puedo renombrar como users

así de esta manera y ya queda de esa

forma si guardo los cambios y venimos

aquí miren lo que sucede ahora tenemos

todos los usuarios pero ahora están

llegando desde la app y qué pasa luego

al estado global de la aplicación y del

estado global de la aplicación

aquí a la interfaz de usuario y de esa

forma entonces estamos cerrando el ciclo

bueno aquí de hecho le voy a colocar

aquí un margin top de 4 para que separan

un poco las columnas también necesito

que se separen con un margin botón de

cuatro por ejemplo ahora si tenemos un

poco más de espacio aquí y de espacio

entre ellos también miren que tenemos

aquí la foto de cada usuario el nombre

el apellido y el email es decir estamos

entonces

consultando una app y tomando sus esa

lista de usuarios colocando esa lista en

el estado global de la aplicación y

dejándola ahí para que cualquier

componente pueda usar esa lista de

usuarios en este caso el componente que

está usando la lista de usuarios es un

componente que creamos llamado y usar

list y ese mismo yo ser list es

realmente quien aquí en este caso está

haciendo el llamado a la apei o quién

manda por lo menos a ejecutar esa

operación entonces aquí de esta manera

cerramos el ciclo de redux de una manera

bastante sencilla tal vez aquí ustedes

no le encuentren mucha gracia tal vez

mucha utilidad porque una aplicación muy

sencilla sólo podríamos hacer con un

yusef

aquí colocando todos los usuarios en el

estado del propio componente pero pues

es una manera de ilustrar cómo lo

podemos usar de una forma muy muy

sencilla ahora esto es muy útil cuando

la aplicación es muy grande es una

aplicación que escala porque ahí vamos a

tener muchos componentes y varios de sus

componentes con seguridad van a

compartirla

misma información entonces para que no

se lo estés pasando a través de prop se

la puedes dejar en un estado global o en

un estor como la de redux para que ellos

la consulten directamente desde allá ese

es el propósito de redux espero que

bueno haya sido un poco clara la

explicación y bueno así cualquier duda

surge pues no dude en escribir en los

comentarios

espero que les haya gustado el vídeo que

les haya parecido útil nos vemos en un

próximo

chao

[Música]