A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Creando el Store de Redux

12/29
Recursos

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:

  1. mapStateToProps: es una funci贸n que le va a indicar al provider qu茅 informaci贸n necesitamos del store.
  2. mapDispatchToProps: es un objeto con las distintas funciones para ejecutar una action en Redux.

Aportes 82

Preguntas 25

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渓a 煤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);

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

tengo muchas dudas de esta clase: 1. 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? 3. mi GET va el el index? 4. 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)

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 鈥榞etState鈥 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 => 鈥渟olo 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 鈥渦ser鈥 y 鈥減laying鈥 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,
  };
};

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 鈥榞etState鈥 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

es decir Redux sirve para guardar informaci贸n? a eso se refiere con estados no?

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 鈥榬eact鈥; (Sin llaves)
import { Provider } from 鈥榬eact-redux鈥; (Con llaves)
import { createStore } from 鈥榬edux鈥 (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鈥ara 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?

Ayuda!!! tengo un problema al parecer con el scope de la data, ya que en el Home la traigo con desestructuraci贸n, pero al momento que la quiero recoger con map en el return me toma como valor inicial a vac铆o

// Uso de react hooks: Nos permiten agregar estado y ciclo de vida a nuestros componentes creados como funciones.
import React from 'react';
import { connect } from 'react-redux';
import '../assets/styles/App.scss';
import '../assets/styles/Media.scss';
import Carousel from '../components/Carousel';
import CarouselItem from '../components/CarouselItem';
import CategoryTitle from '../components/CategoryTitle';
import Search from '../components/Search';

const Home = ({ mylist, trends, originals }) => {
    return (
        <>
            <Search />
            {mylist.lenght > 0 &&
                <CategoryTitle title="Mi lista">
                    <Carousel>
                        {mylist.map(video => {
                            <CarouselItem key={video.id} {...video} />
                        })}
                    </Carousel>
                </CategoryTitle>
            }
            <CategoryTitle title='Tendencias'>
                <Carousel>
                    {trends.map(video => {
                        <CarouselItem key={video.id} {...video} />
                    })}
                </Carousel>
            </CategoryTitle>
            <CategoryTitle title="Originales de  PlatziVideo">
                <Carousel>
                    {originals.map(video => {
                        <CarouselItem key={video.id} {...video} />
                    })}
                </Carousel>
            </CategoryTitle>
        </>
    );
}

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

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

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

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

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.

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.