Creando el Store de Redux

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/

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.

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

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

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”

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

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

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

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

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

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

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

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)

Comparto como quedó mi Home.jsx

import React from "react";
import { connect } from "react-redux";

import SearchBar from "../components/SearchBar";
import Categories from "../components/Categories";
import Carousel from "../components/Carousel";
import CarouselItem from "../components/CarouselItem";

import "../assets/styles/App.scss";

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

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

    return (
        <>
            <SearchBar />
            {categories.map((category, i) => (
                lists[i].length > 0 && (
                    <Categories key={category} title={category}>
                        <Carousel>
                            {lists[i].map((item) => (
                                <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);

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

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.

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'),
);

1. 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.
2. El Store orquesta y mantiene el estado del aplicativo.
3. El estado en Redux proviene de los reducers. Repitamos: los reducers producen el estado de nuestra aplicación.
4. 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 />

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)

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

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 ?

No termino de entender cuál es la función de este reducer

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

Hola 😄 Al momento de ejecutar mi aplicación después de implementar todo el código de esta clase, me apareció el siguiente error:

He revisado mi código de pies a cabeza y no doy con el error. Quisiera saber si alguien podría indicarme de qué se trata.

Les dejo el link de mi repositorio del proyecto: https://github.com/jmolinac97/ejemplo-react-redux

no sé porque los profesores en platzi cuando tienen un error de código, saben donde se encuentra ese error de manera muy rápida, me di cuenta cuando lo miró rapidísimo y paso de una al editor sin explicar el porque de ese error, es como si ya supieran todos los errores de memoria que hay en la aplicación y como arte de magia lo solucionan, entiendo que la clase esta muy preparada pero, porqué no nos enseñan un poquito sobre ese error? Yo pienso que debería de salir un curso sobre como gestionar los principales errores de código en JavaScript, ósea es decir los errores mas comunes que la gente comete al crear una aplicación(claro con ejemplos sencillos para entender), eso seria fenomenal, ustedes que piensan compañeros/as dale like o comenta.

Ayuda! tengo todo tal cual lo explica en el video. Ya revice todo y no se por que me da este error

Uncaught TypeError: Cannot read property ‘getState’ of undefined
at eval (Provider.js:28)
at mountMemo (react-dom.development.js:15846)
at Object.useMemo (react-dom.development.js:16219)
at useMemo (react.development.js:1532)
at Provider (Provider.js:27)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.developme

Nota metal => “solo traer los elementos desde Redux que se necesiten por pantalla”

Una opcion para no tener initialState en el index es importar el archivo initialState.json como modulo

import { initialState } from '../initialState.json';

Y si sale el error de length lo mas probable es que en initialState tengas

 "mylist"

en minuscula, solo debes arreglarlo

"nyList"

El mapStateToProps se pudo haber simplificado de esta manera:

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

Cuando debemos usar Redux y cuando debemos usar Context?

Uff, ¡Qué emocionante!

Explicación de los parámetros de connect

Otra forma de inicializar el initialState:

import initialState from '../initialState.json'

{
	"user": {},
	"playing": {},
	"myList": [],
	"trends": ...,
	"originals": ...

Por fin empiezo a entender Redux!!! Muy buen profesor

en lugar de copiar todo el json me funciono de esta forma despues de los imports de index.js

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

Tengo una duda, ¿Las props que pone en el Home son las que estan declaradas hasta abajo? Donde se itera el estado. Si es asi, ¿Por que se declaran hasta abajo? ¿No habria error por usarlas antes de que esten declaradas?

uno repasando y en la practica uno entiende mejor

Para que el renderizado de carruseles siga siendo dinámico hay que mejorar la estructura del json ya que “user” y “playing” no son listas de videos:

Y el Home.jsx quedaría así:

const Home = ({ lists }) => {
    return(
        <React.Fragment>
            <Search/>
            {Object.keys(lists).map(category => (
                lists[category].length > 0 && (
                    <Categories key={category} title={category}>
                        <Carousel>
                            {lists[category].map(item => (
                                <CarouselItem key={item.id} {...item} />
                            ))}
                        </Carousel>
                    </Categories>
                )))}
        </React.Fragment>
    )
}

const mapStateToProps = state => {
    return {
        lists : state.lists
    }
}

export default connect(mapStateToProps, null)(Home)

Ya con eso no haria falta hacer un map por cada categoría 😁

En mi caso yo tenía la lógica de los carruceles de una forma mas reducida:

nameList.map((category) => (
    categories[category].length > 0 && (
        <Categories key={category} title={category}>
            <Carousel>
                {categories[category].map((video) => (
                  <Item key={video.id} {...video} />
                ))}
              </Carousel>
         </Categories>
    )
))

Asi que tuve que dejar el archivo json asi:

y el mapStateToProps asi:

const mapStateToProps = (state) => {
  return {
    categories: state.categories,
  };
};

Repositorio del curso
https://github.com/platzi/PlatziVideo/tree/feature/router-redux

hasta aqui pude llegar, esta muy desactualizado y ya no da mas, por lo menos quede con el createStore de redux, como esta en desuso no me funciona, asi que no podre continuar, ahora si hay un superheroe q sepa como es, se lo agradecere para poder continuar

Perdon por lo que voy a decir pero explicar re mal profe, segundo el create store ya esta depricated, ahora es configureStore y ahora es totalmente diferente hay que utilizar methodos como el createSlice y conectarlo al condifureStore.

Al día de hoy se ha facilitado mucho el uso de redux con los hooks y con @reduxjs/toolkit. Les recomiendo seguir este tutorial para que entiendan de que se trata: https://react-redux.js.org/tutorials/quick-start.

Para los que tengan problemas al cargar el proyecto al final del video por la propiedad getState:

Provider.js:30 Uncaught TypeError: Cannot read property ‘getState’ of undefined

A mi me función cambiar el render en el index.js de la raiz de src para vincular la variable store al Provider.

ReactDOM.render(
    <Provider store={store}>
        <App /> 
    </Provider>,
    document.getElementById('app')
);

Espero que sea de ayuda.

Práctica:

Usando hooks en lugar de connect

<import React, { useState, useEffect } from "react";

import Search from "../components/Search";
import Categories from "../components/Categories";
import Carousel from "../components/Carousel";
import CarouselItem from "../components/CarouselItem";
import { useSelector, useDispatch } from "react-redux";
import useInitialState from "../hooks/useInitialState";
import "../assets/styles/App.scss";



const Home = (props) => {
  //const dispatch = useDispatch();
  useEffect(() => {});
  const data = useSelector((state) => {
    return {
      ...state,
    };
  });
  console.log(data.trends);

  return (
    <>
      <Search />
      {data.mylist.length > 0 && (
        <Categories title="Mi Lista">
          <Carousel>
            {data.mylist.map((item) => (
              <CarouselItem key={item.id} {...item} />
            ))}
          </Carousel>
        </Categories>
      )}
      <Categories title="Tendencias">
        <Carousel>
          {data.trends.map((item) => (
            <CarouselItem key={item.id} {...item} />
          ))}
        </Carousel>
      </Categories>
      <Categories title="Originales de Platzi Video">
        <Carousel>
          {data.originals.map((item) => (
            <CarouselItem key={item.id} {...item} />
          ))}
        </Carousel>
      </Categories>
    </>
  );
};

export default Home;
>

Gracias!

a

En Home también deben quitar la instancia de los hooks, ya que no se utilizan (por buena práctica).

Debería quedar así:

import React from "react";

Bien manos a la obra

Hola, quizás no puse atención, pero no sé la diferencia de cuando no coloca y cuando coloca las llaves al importar, ¿alguien me podria explicar?

import React from ‘react’; (Sin llaves)
import { Provider } from ‘react-redux’; (Con llaves)
import { createStore } from ‘redux’ (Con llaves)
import reducer from ‘./reducers’ (Sin llaves)

Algunas notas:

Esto también se podría hacer manejando estados con React no? Podemos crear el estado de data donde ponemos la data del json y luego manipularlo con setState…

Un tema tan complejo en esencia como es la implementación de react-redux explicado de una manera amigable, simplemente sorprendente.

Una pregunta, y como se hace en el caso de que yo obtenga esos datos por medio de una API como se habia hecho anteriomente y quiera manejarlo con redux es posibles, es viables?

Para crear un store necesitamos llamar a la función c r e a t e S t o r e del paquete de Redux pasándole los parámetros del R e d u c e r y i n i t i a l S t a t e…Para conectar components en Redux vamos a necesitar importar C o n n e c t de r e a c t - r e d u x.

Para los que como yo aún no les entran los conceptos al 100, comparto un glosario de redux:
https://medium.com/react-redux/glosario-de-términos-de-redux-c2bca005ca69#:~:text=Un store es un objeto,estado actual de la aplicación.

En nuestro ejemplo estamos utilizando una fake api y llamandola desde un archivo externo, para crear el store vamos a mover toda esa data al archivo index.js y almacenarla en una variable llamada initialState.

Posteriormente que ya tengamos importado provider en index.js encapsulamos nuestra app del React.render:

import { Provider } from 'redux-react'

React.render(
	<Provider>
		<App/>
	</Provider>,
container
)

Creamos una variable que podremos llamar como store y asignarle la función createStore que también debemos importar junto con el reducer:

import { createStore } from 'redux'
import reducer from './reducer'

let store = createStore(reducer, initialState)

Ya con esta variable de función creada en la cual asignamos como parametros nuestro reducer y asignamos nuestro state actual que queremos compartir (initialState) con los demás componentes. le enviamos como props al provider el store en una variable llamada store que asignamos anteriormente:

React.render(
	<Provider store={store}>
		<App/>
	</Provider>,
container
)

Para utilizar nuestro store en algún componente como lo es el Home que llama los videos nos dirijimos al componente de Home y eliminamos el llamado a la fakeapi que teniamos.

En cualquier componente que quisieramos usar el store debemos importar connect de react redux:

import {connect} from 'react-redux'

Ya con eso hecho cuando exportamos nuestro componente de Home lo hacemos con la función connect que lleva 2 paramentros, el primero nuestros props por así decirlo y nuestros actions que en este caso estamos utilizando entonces los dejamos en null para evitar errores. junto con el componente home entre parentesis. también debemos definir nuestro mapStateToProps que van a ser las props de nuestro state que vamos a querer renderizar y debemos retornar:

let mapStateToProps = (state) => {
	return({
		myList = state.myList,
		trends = state.trends,
		originals = state.originals
	})
}
export connect(mapStateToProps, null)(Home)

Nota: Tener en cuenta que solo se deberían retornar las variables o los objetos que requerimos en nuestro componente, no es necesario retornarlos todos.

Con nuestros objetos del state retornados, en nuestro componente de función podemos pasarles esos parametros para utilizarlos en el renderizado:

let Home = ({myList, trends, originals}) =>{
...}

Entre mas avanzamos, mas crecen los imports, ¿existe la forma de guardar esto en un archivo y llamar a ese archivo para así tener menos codigo en los archivos, o no es buena idea?

import React, { useState, useEffect } 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 "../assets/styles/app.scss";
import useInitialState from '../Hooks/useInitialState'

Developers, aqui les tengo la documentacion para que amplien un poco el contexto y de como se maneja el connect: Click Aqui

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.

para el que no conosca redux recomiendo antes realizar el curso de redux 2018 de leonidas:
https://platzi.com/clases/redux-2018/

A alguno le paso este problema? Pasa cuando agrego el createStore al index.js

Creo que no entiendo el uso de Redux, si ya no traemos los datos de la API nuestra app va a ser siempre estatica, que sentido tiene hacer eso

Como podria guardar los datos de una api real en el store para asi usar esos datos en toda mi app con el provider

Me costo bastante esta clase, nunca lograba renderizar… despues me di cuenta que no tenia el return en el componente de Home jajaja

Implementacion de Redux

Index.js

Home.jsx

Ya que me gusto la técnica del curso de react avanzado de no hacer export default de los componentes que creamos, creen ustedes que esta sintaxis se ve fea?

export const Home = connect(mapStateToProps)(({ videos= [] }) => {
    ...
    return (
     ....
    )
})

En Home.jsx tampoco se esta usando useState y useEffect
Ambos pueden ser eliminados.

Cuando empece a ver redux, me surgió la duda sobre las diferencias con Context API de React. Les dejo un link donde se explica un poco entre las diferencias de ambos y su correcta aplicación dependiendo del caso.

https://www.itdo.com/blog/react-context-api-puede-ser-alternativa-a-redux/

Ahora si voy entendiendo 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 saber más sobre connect y los parámetros que puede recibir entren aquí

Hay otras manera mucho más fácil de aplicar redux me lo enseño el profesor Fernando Herrera de udemy. Saludos

La razón por la cual no necesitamos utilizar la función mapDispatchToProps en Home.jsx es porque para agregar un película a mis favoritas es porque no estamos cambiando el State de la aplicación sino que estamos tomando un elemento que forma parte del estado inicial y duplicando su visualización en otra sección de la App?

¿El store es para crear un E-Commerce?

Ver el curso de Redux Por Bedu me ayudó mucho a entender las fases de Redux, de hecho, todo lo que el profe Oscar esta explicando y haciendo, ya lo sabía gracias a ese curso! Entonces se los recomiendo mucho 😄

index.js

Home.jsx

Una hora revisando porque no me andaba y me habia olvidado de activar el fakeAPI 😅

Usando hooks

  const { myList, originals, trends } = useSelector(({ originals, myList, trends }) => {
    return {
      myList,
      originals,
      trends,
    }
  });```

Ntons como se conencta

Trabajar con el estado

• Se define el initialState y se carga con la data inicial.
• Se crea el store definiendo el store incial y reducers:

import {createStore} from "react-redux"
import reducer from "./reducers"

const initialState = {
   user: {},
   categories: {},
   someDate: []
}
const store = createStore(reducer, initialState)
<Provider store={store}>
   <App />
</Provider>

• Posterior se debe de actualizar cada componente dinamico que maneja estados.
• Se agregar el metodo connect de react-redux:
• Se modifica el export del componenet con una sintaxis de:

const Home = ( { name, age } ) => 
	return <p>`My name is  ${name} and I am {age} years old`</p>

const mapStateToProps = (state) => {
	return {
		name, 
		age
	}
}
export connect(mapStateToProps, actions = null)(Home)

Vuelvo a publicar ya que me cortó el mensaje… Me disgusta que deba tener todo el proyecto anterior de otros cursos para poder aprender a usar Redux… Preciso algo más al punto… Alguien tiene un curso o enlace para recomendarme y no tener que comerme perder días enteros haciendo el proyecto de PlatziVideo paso a paso desde el comienzo?.. Intenté incluso clonar el repo pero, además de desactualizado, arranca desde React Router, detalle que realmente no me sirve en mi situación donde símplemnete quiero aprender Redux en un ambiente independiente.

yo trate de hacerlo un poco mas dinamico y para el tema de si es visible estoy enviandolo como propiedad para el componente category… me quedaron de esta manera

Ya que tenemos todo en el proyecto tenemos que crear nuestro Store. Ahora haremos el initialState en nuestro Store. Ahora para practicar vamos a crear un initialState que vamos a mandar a toda la aplicacion y utilizarla por medio del connect.

En este caso vamos a pasar los datos del API como constante en el archivo raiz index con el nombre initialState y lo modificaremos quitando su inicio y agregando los elementos de users y playing.

Ahora usaremos el createStore y crearemos un Store nuevo y lo pasaremos a nuestro Provider. Este store va a recibir dos parametros, un reducer y nuestro initialState. El reducer tenemos que importar la carpeta que creamos de reducer, importamos toda la carpeta. Ahora pasamos como parametro a nuestro provider mandamos el store.

import React from 'react'
import ReactDOM from 'react-dom';
import App from './routes/App';
import {Provider} from 'react-redux';
import reducer from './reducers'
import {createStore} from 'redux';

//FALTA EL INITIALSTATE

const store = createStore(reduce, initialState);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('app'))

Ya que tenemos todo esto vamos a ir a nuestra App y vamos a indentificar los elementos que utilizan estos datos. Primero home. aqui tenemos que importar el Connect.

import { connect } from 'react-redux';

Ahora crearemos el conector. Al final escribiremos:

export default connect(props, actions)(Home);

sin el default que ya teniamos, los props seran los valores que vamos a ir pasando y Actions es la queremos que pase con nuestros props. Esto nos quedaria:

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

Ahora ahi mismo crearemos nuestra funcion mapStateToProps con las que vamos a llamar SOLAMENTE LOS ELEMENTOS QUE NECEISTEMOS DEL ESTADO.

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

Ahora no necesitaremos hablarle a la API, ni la validacion ni inicializar el estado por medio de hooks

Ya que tengamos esto solo por destructuracion separamos los componentes y los reemplazamos quitando el initialState. Pero hay que configurar nuestro reducer, donde tenemos que en la carpeta de reducers en su archivo index vamos a crear una funcion llamada Reducer que va a recibir como parametro el State y el action y retornaremos el estado

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

Si te da error que no se puede leer mylist, continua con el siguiente video de los reducers y se solucionara.