Esta clase se me complico mucho, por eso les dejo algunos principios de redux que me ayudaron entender mejor,
*Esta basado en el patrón de diseño Flux*Toda la data de la aplicación, se encuentra en una estructura previamente definida.*Toda la informción se encontrará almacenada en un único lugar llamado STORE.*ElSTORE jamas se modifica de forma directa.*Interacciones de usuario y/o código, dispara acciones que describen qué sucedió
*El valor actual de la información de la aplicación se llama -State*Un nuevo estado es creado, en base a la combinanción del viejo estado y una acción, por una función llamada Reducer.
Mas información la pueden encontrar en
Quisiera agregar dentro de la documentación, el curso del creador de Redux, 100% gratis
Para crear un Store necesitamos llamar a la función createStore del paquete de redux pasándole los parámetros del reducer y initialState.
Para conectar un componente a Redux vamos a necesitar importar connect de react-redux, connect va a aceptar dos parámetros:
mapStateToProps: es una función que le va a indicar al provider qué información necesitamos del store.
mapDispatchToProps: es un objeto con las distintas funciones para ejecutar una action en Redux.
gracias por la explicación bro!
gracias!
De esta forma no tendriamos que colocar todo el estado en el index.js
Muy bueno, yo de hecho agregue las otras objetos (user y playing) dentro del archivo json direcamente
me sale error de length, con este metodo
Dice que mapStateToProps es una función que le va a indicar al provider qué información necesitamos del store, es decir que el store nos va a pasar esa información por medio de los props del componente en el que lo indico o que está suscrito o conectado. Interesante, entiendo entonces con esto nos podemos evitar un gran árbol de paso de props y que solo los pasamos una vez y vienen directamente del store "la única fuente de la verdad"
Así es Juan :)
Por eso es recomendado usar manejo de estado en aplicaciones con varias páginas o múltiples componentes, porque se puede complicar y da lugar a cometer errores cuando no hay una "única fuente de la verdad".
Si alguien tiene problemas con el length inicialice las props con un array vacío
Como hago el initialState cuando realmente estoy llamando información de un API?
Yo también tengo está duda.
Hola Oscar. Sólo debes iniciarlo con un objeto vacío, ya cuando obtengas los datos de la API los deberás agregar al state de redux.
Slds!
Vengo de trabajar con Vuex, aunque existen muchas similitudes dado que ambos fon librerías Flux, me pareció importante aclarar la diferencia entre la librería flux y redux propiamente, Principalmente redux tiene un Único Store.
Si no me equivoco Flux no es una librería sino una arquitectura.
me hubiese gustado ver esto con una APi real.. porque no entiendo que hacer T.T
mapStateToProps: es una función que le va a indicar al provider qué información necesitamos del store.
mapDispatchToProps: es un objeto con las distintas funciones para ejecutar una action en Redux.
Hola, Joel :)
Gracias por compartir, puedes encontrar esa información en la descripción de la clase.
Trate de hacer una manera mas limpia setear las props del mapStateToProps:
Para este caso initialState será el estado que estará cambiando en nuestra aplicación, será el lugar a dónde se le haga push sobre cualquier video que guardemos en nuestra lista.
InitialState como su nombre lo dice es el estado inicial. Lo que va cambiando en sí, es el state. Para realizar cambios al estado es necesario utilizar Reducers los cuales son funciones puras que toman el estado anterior, una acción y devuelve un nuevo estado con las modificaciones necesarias.
Trataré de escribir lo que pasa para poder comprender mejor, recibo comentarios:
index.js
importReactfrom'react';importReactDOMfrom'react-dom';import{Provider}from'react-redux';import{ createStore }from'redux';importreducerfrom'./reducers';importAppfrom'./routes/App';const initialState ={...};const store =createStore(reducer, initialState);ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById('app'),);
Definimos un estado en la entrada del proyecto, pues en la raíz es donde se va a crear un store. un createStore al que se le pasa una función (reducer) y un objeto (initialState) que el reducer pueda comprender.
El Store orquesta y mantiene el estado del aplicativo.
El estado en Redux proviene de los reducers. Repitamos: los reducers producen el estado de nuestra aplicación.
Un reducer es una función pura que toma por parámetros el estado y una acción, así mismo, en nuestro ejemplo regresa el estado.
.
reducer.js
El reducer es una función pura que recibe el initialState y una acción para realizar algo con ese estado que recibe, para después retornarlo al Store, sino crearlo como en nuestro caso y pasarlo al Provider y alimentar todo el aplicativo.
.
Home.jsx
Como estamos pasando datos de información al componente Home, debemos conectar la información del Store con el componente Home.
Le Provee al componente las partes de la información que necesita y las funciones que puede utilizar para enviar acciones al Store.
Esto último es tratar de verlo algo así:
- Cuando exportamos el componente Home, lo vamos a conectar con el Store Global para traer la información que especificamos en mapStateToProps, dentro de éste le decimos cuál información del Store necesitamos traer y alimentar Home. Cómo el reducer solamente recibe el estado del Store y lo devuelve sin ninguna acción, entonces createStore alimenta al Provider y pasa los datos de información al componente <App />
Gracias Andres, tu explicacion me permitio reforzar el contenido del profe. Aun me cuesta entender todo lo visto...
tengo muchas dudas de esta clase:
como es posible que al crear mapStateToprops esta pueda acceder al state si esta fuera de la función
2.en mi caso yo no uso un fake API uso un API real y tengo un simbolito de cargando mientras hace el GET, si mi GET esta en el index para ponerlo en el InitialState como home se da cuenta que ya los datos estan listos?
mi GET va el el index?
yo uso clases (así lo usábamos en el curso de react) como uso el componentDidMount en una función
El store tiene las siguientes responsabilidades:
Contiene el estado de la aplicación
Permite el acceso al estado vía getState()
Permite que el estado sea actualizado vía dispatch(action)
Registra los listeners vía subscribe(listener)
Maneja la anuliación del registro de los listeners via el retorno de la función de subscribe(listener)
Gracias por el aporte. 👌💚
en que tipo de aplicaciones se debería usar redux y por que?
Creo que en aplicaciones donde se maneja un estado con muchos atributos (datos) y esos datos se utilicen en muchos componentes o se vean afectados (modificados) por la interacción de muchos componentes, deberías de utilizar Redux.
Pero en caso que tu aplicación, sea una Landing con poca probabilidad es escalabilidad a futuro y muy pocos componentes utilizando los mismos datos, creo que en este escenario no es necesario.
Pienso que si tienes un estado global que lo vas a compartir entre diferentes componentes, o componentes que no están conectados entre sí, puede ser útil.
Pero si no es el caso, creo que no es necesario.
En mi opinión, Redux es una herramienta que aplica un patrón de diseño, y como tal, ese patrón no siempre se aplica en todas las soluciones :)
Wao, muy bien explicado.
Pero el objecto InitialState esta quemado por decirlo asi.
para realizar un ejemplo mas real, en ese index.js se podría llamar una api inicialmente ?
Pero siempre se han manejado estados iniciales que después se actualizan con una llamada a una api ¿no?
Con cuerdo con edwintrumpet, inicialmente tus datos deberia estar vacio pero si debe de existir un estado inicial. Por ejemplo trends es un [ ] vacio que posteriormente se actulizara cuando se haga fetch a la API
