Creando el Store de Redux

Clase 12 de 29 • Curso de React Router 5 y Redux

Resumen

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.

Leandro Terrado

student•

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.

*El STORE 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 https://es.redux.js.org/

Leandro Terrado

student•

Quisiera agregar dentro de la documentación, el curso del creador de Redux, 100% gratis

https://egghead.io/courses/getting-started-with-redux

Bernardo Aguayo Ortega

student•

Gracias bro!!!

Brando Rodríguez

student•

Creando el Store de Redux

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.

Bernardo Aguayo Ortega

student•

gracias por la explicación bro!

Matías Wasiak

student•

gracias!

Jose Giovanni Vargas Rueda

student•

De esta forma no tendriamos que colocar todo el estado en el index.js

import { initalState } from '../initialState.json';
initalState.user = {};
initalState.playing = {};

Victor Baruch Pazaran Jaimes

student•

Muy bueno, yo de hecho agregue las otras objetos (user y playing) dentro del archivo json direcamente

Usuario anónimo

user•

me sale error de length, con este metodo

Juan Carlos Pinzón

student•

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"

Daniel Adolfo Ordoñez Rubio

student•

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".

Gustavo Adolfo Ramírez Apache

student•

Si alguien tiene problemas con el length inicialice las props con un array vacío

const Home = ({ mylist = [], trends = [], originals = [] }) => {

Jonathan Cepeda

student•

muchas gracias

Eliaz Bobadilla

student•

Muchas Gracias!

Oscar David Arcos Rodriguez

student•

Como hago el initialState cuando realmente estoy llamando información de un API?

Hameyalli Elizalde

student•

Yo también tengo está duda.

Marco Farías

student•

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!

Jesús Miguel Quinto Teran

student•

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.

https://medium.com/@dakota.lillie/flux-vs-redux-a-comparison-bbd5000d5111

Marifer Villarroel

student•

Hola Jesús

Si no me equivoco Flux no es una librería sino una arquitectura.

Sura Naileth Cedeño Lopez

Team Platzi•

me hubiese gustado ver esto con una APi real.. porque no entiendo que hacer T.T

Joel Bello

student•

Daniel Adolfo Ordoñez Rubio

student•

Hola, Joel :) Gracias por compartir, puedes encontrar esa información en la descripción de la clase.

Angel David Castiblanco Sepulveda

student•

Trate de hacer una manera mas limpia setear las props del mapStateToProps:

const mapStateToProps = ({myList, trends, originals}) => ({
  myList,
  trends,
  originals
})

Esteban Martini

student•

otra manera de tener aislado la data del initialState es

copiar esa constante en un archivo separado, initialState.js
exportarlo, export default initialState y ahora en el index.js se puede hacer el import del initialState

import initialState from './redux/initialState'
import reducer from './redux/reducers'

const store = createStore(reducer, initialState)

Patricio Manuel Ugarte

student•

Comparto como quedó mi Home.jsx

import React from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;

import SearchBar from &quot;../components/SearchBar&quot;;
import Categories from &quot;../components/Categories&quot;;
import Carousel from &quot;../components/Carousel&quot;;
import CarouselItem from &quot;../components/CarouselItem&quot;;

import &quot;../assets/styles/App.scss&quot;;

const Home = ({ myList, trends, originals }) =&gt; {

    const lists = [myList, trends, originals];
    const categories = [&quot;Mi Lista&quot;, &quot;Tendencias&quot;, &quot;Originales de PatVideo&quot;];

    return (
        &lt;&gt;
            &lt;SearchBar /&gt;
            {categories.map((category, i) =&gt; (
                lists[i].length &gt; 0 &amp;&amp; (
                    &lt;Categories key={category} title={category}&gt;
                        &lt;Carousel&gt;
                            {lists[i].map((item) =&gt; (
                                &lt;CarouselItem key={item.id} {...item} /&gt;
                            ))}
                        &lt;/Carousel&gt;
                    &lt;/Categories&gt;
                )))}
        &lt;/&gt;
    );
};

const mapStateToProps = (state) =&gt; {
    return {
        myList: state.myList,
        trends: state.trends,
        originals: state.originals,
    };
};

export default connect(mapStateToProps, null)(Home);

Alexander Nova Arevalo

student•

Asi queda mas bonito y mas encapsulado, buen aporte

Jimmy Buriticá Londoño

student•

Gracias por compartir el código.

Andrés Campuzano Garzón

student•

🦄 Acá el código hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/40e0d827e01d323240733bcc006a48585af593ce

Fernando Alvarado

student•

muchas gracias jajajajaja, me salvaste

David Behar

student•

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.

Jorge Moreno Díaz

student•

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.

Andrés Felipe Eslava Zuluaga

student•

Trataré de escribir lo que pasa para poder comprender mejor, recibo comentarios: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers';
import App from './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

const reducer = (state, action) => {
  return state;
};

export default reducer;

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

import React from 'react';
import { connect } from 'react-redux';
import Search from '../components/Search';
import Categories from '../components/Categories';
import Carousel from '../components/Carousel';
import CarouselItem from '../components/CarouselItem';
import useInitialState from '../hooks/useInitialState';
import '../assets/styles/App.scss';

const Home = ({ myList, trends, originals }) => {
  return (
    <>
      <Search />

      <Categories title='Mi lista'>
        <Carousel>
          {myList?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

      <Categories title='Originals'>
        <Carousel>
          {originals?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

      <Categories title='Trends'>
        <Carousel>
          {trends?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

    </>
  );
};

const mapStateToProps = (state) => {
  return {
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
  };
};

export default connect(mapStateToProps, null)(Home);

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 />

Luis Alejandro Vera Hernandez

student•

Gracias Andres, tu explicacion me permitio reforzar el contenido del profe. Aun me cuesta entender todo lo visto...

Jesus Adrian Berrio Valdes

student•

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

Ricardo Medina

student•

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)

Daniel Adolfo Ordoñez Rubio

student•

Gracias por el aporte. 👌💚

fabian miliani

student•

en que tipo de aplicaciones se debería usar redux y por que?

César Ernesto Rivas Martínez

student•

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.

Jaime Gabriel González Célleri

student•

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 :)

Moveo Ventures

student•

Wao, muy bien explicado.

Jhoan Sebastian Rodriguez Sanchez

student•

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 ?

Edwin García

student•

Pero siempre se han manejado estados iniciales que después se actualizan con una llamada a una api ¿no?

Markoz Peña Mendez

student•

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

Creando el Store de Redux

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto