Scribd
Cargar
99 vistas

Redux React

Este documento explica cómo conectar Redux con React utilizando la librería React-Redux. Primero se crea una store de Redux, luego se importa el proveedor de React-Redux para conectar la aplicación de React con la store. Los componentes de React pueden acceder al estado global mediante la función connect de React-Redux, la cual mapea parte del estado a props. También se puede despachar acciones desde los componentes para modificar el estado global.

Cargado por

Lautaro Nuñez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
99 vistas

Redux React

Este documento explica cómo conectar Redux con React utilizando la librería React-Redux. Primero se crea una store de Redux, luego se importa el proveedor de React-Redux para conectar la aplicación de React con la store. Los componentes de React pueden acceder al estado global mediante la función connect de React-Redux, la cual mapea parte del estado a props. También se puede despachar acciones desde los componentes para modificar el estado global.

Cargado por

Lautaro Nuñez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

¿Cómo se conecta redux con React?

Necesitamos una librería especial que conecte React con Redux. Vamos a utilizar ciertos
componentes de una librería que se llama React-Redux.

npm install redux react-redux

Para crear una Store, seguimos los siguientes pasos:

1. Importamos {createStore} from ‘Redux’;


2. Creamos una constante con el nombre de la acción;
3. Crear la función que contendrá la acción como un objeto;
4. Crear una constante con el estado inicial;
5. Crear la función reducer con el estado inicial por defecto y la acción. Adentro tendrá
un switch con las diferentes acciones y sus funciones;
6. Crear una constante ‘store’ donde se utiliza ‘createStore’ con el reducer como
parámetro.
7. Exportar por default la store.

ATENCION: los nombres de las acciones y las funciones que contienen las acciones como
objeto y también el reducer, lo más común es que estén en archivos separados!!!

Quedaría así:

import {createStore} from ‘redux’;

const INCREMENTO = ‘incremento’;

export function incremento(){

return {

type: INCREMENTO,

const initialState = {

count: 0

function reducer (state = initialState, action){

switch(action.type){
case INCREMENT : return{ …state, count: state count +1}

default: return state

Const store = createStore(reducer);

Export default store

¿Cómo uso esto en React?

Importo en index.js {provider} from ‘react-redux’

Este provider va a conectar la app de React con redux.

reactDOM.render(

<React.StrictMode>

<Provider store= {store}>

<App/>

</Provider>

Existe una función llamada ‘mapStateToProp’ que lo que va a hacer es recibir todo el estado
global como parámetro y devolver un objeto que contenga solo una de las propiedades de ese
estado, suponiendo que el estado global tenga más de un parámetro. Supongamos que yo
quiero usar ese estado dentro de algún componente de React, ¿Cómo hago? Tengo que
importar {connect} from ‘react-redux’, utilizo el estado en el componente: por ejemplo

Import {connect} from ‘react-redux’

function App (props) {

return {

<div>

<header>

<span> el Contador es: {props.count}</span>


</header>

</div>

function mapStateToProps(State){

return{

count: state.count,

Export default connect(mapStateToProps)(App)

Exporto connect con la function mapStateToProp como parámetro conectado con el


componente App. Internamente connect toma la store, llama al getstate y ejecuta el
mapStateToProp pasándole como argumento el estado que consigue de la store y después lo
combina con las propiedades del componente.

Los connect solo se usan si el componente requiere utilizar alguna propiedad del estado global,
no es obligatorio usarlo.

Todo esto sería como subscribir el componente a el estado global. Atiende a los cambios del
estado y los utiliza dentro del componente.

¿Pero que pasa si en mi componente quiero tener un botón que despache acciones para
cambiar el estado global?

Bueno, tengo dos opciones. La primera es importar la acción, en este caso {increment} de la
carpeta donde la tengamos, en este caso en la misma store, from ‘/.store’ (en realidad lo más
común es que esté guardado en un archivo ‘actions.js’) y usarlo en el botón con la propiedad
onClick . Al usar connect tengo el método dispatch de la store incluido para usar en el evento
del botón. Por lo que directamente lo usamos así:

<button onClick = { ( )=> { props.dispatch(increment( ) ) } } > + </button>

Esto funcionaría porque el connect que importamos inyecta a las props el método dispatch
que adquiere de la store.

El segundo camino es pasar la acción cuando exportamos el connect;

export default connect(mapStateToProps, {increment})(App)


y luego simplemente utilizar la acción en el botón sin usar el dispatch, porque lo utiliza
automáticamente:

<button onClick = { ( )=> { props.increment( ) } } > + </button>

Básicamente lo único que nos ahorra es en escribir el dispatch :P

Entonces, entedemos que ‘connect’ tiene dos argumentos, una donde traemos las
propiedades del estado global, para “subscribirnos” a esos estados, y otro donde podemos
importar acciones para despacharlas. Tenemos subscribe y dispatch en connect.

Pero ¿Qué pasa si tenemos un componente que no quiere recibir las props del estado global,
sino que solamente quiere despachar acciones?

Muy simple:

export default connect(null, {increment})(App)

Definimos el argumento de propiedades que no las necesitamos colocando ‘null’, y nos queda
solo las acciones que queremos despachar.

Se muestra otra manera de hacer el dispatch SOLO en componentes funcionales, sin usar
connect y usando hooks. Esta manera no se hace mucho por lo que en caso de necesitarla, se
describe en la lecture del M2-12 cohorte 16-a minuto 38:54. SOLO EN EL REMOTO CASO DE
QUE LO PIDAN EN EL CP. En el mismo video en el minuto 40:45 también se describe una forma
de obtener las propiedades del estado global sin connect SOLO en componentes funcionales
(no de clase, aunque ¿quien usa clase….?) Eso es un poco más interesante porque ahorra
código. OJO con lo que hay que importar para que funcionen los hooks.

NOTA: todo lo que comience con ‘use’ es un hook.

Ahora bien…

¿Qué pasa si tengo una store enorme con un montón de propiedades de estado global dentro?

¿Tengo que hacer un console.log de todo para saber qué tiene? No, tranqui.

Vamos a usar las Redux Dev Tools.

¿Cómo se hace? Bueno,

Cuando nosotros creamos la store, como segundo argumento vamos a pasar la conexión a las
Redux Dev Tools:

Const store = createStore (reducer, window.__REDUX_DEVTOOLS_EXTENSION__ &&


window.__REDUX_DEVTOOLS_EXTENSION__()

);

Esta conexión se busca directamente en Google.


Para poder usarlo, debo tener una extensión de Chrome instalada en mi navegador, la
extensión se llama Redux DevTools.

Entonces, a la hora de inspeccionar una pagina (click derecho, inspeccionar) vamos a tener
además de la consola y todo lo otro, una pestaña llamada Redux en donde nos va a detallar
todas las propiedades que tiene el estado global y un historial de acciones que se hayan
ejecutado cambiando el estado. Incluso puedo ver como fueron los cambios que se realizaron
en cada acción del historial.

Esto entre otras herramientas que habilita.

MUY BUENO ESTO

Otro tema. ¿Cómo conecto redux React a una API? Ya sea para obtener data o para ejecutar
acciones asíncronas.

Necesito otra librería… llamada REDUX THUNK

¿Cómo la uso?

Primero la instalamos

Npm install redux-thunk

Luego para combinar las dos cosas, vamos a tener que leer documentación, porque nadie se
acuerda como hacerlo de memoria.

Está explicado en la documentación de Redux DevTools, pero podemos volver a entrar al video
M2-12 cohorte 16a minuto 58:00 aprox

Entonces, para crear una acción asíncrona podemos hacer algo así: función que contiene el
objeto de la acción: En vez de retornar un objeto, retorno una función que dentro tenga el
setTimeOut

export function incrementoasync(){

return (dispatch) => {

setTimeout ( ( ) => {

dispatch(increment ( ))

}, 1500);

}
Al la función devolver otra función y no un objeto, va a ser interceptado por redux thunk y va a
ejecutarse el setTimeout, va a esperar el tiempo y luego se ejecutará el dispatch.

rfce

También podría gustarte