Explicación teórica: ciclo completo de Redux

Tal cual era mi cara cuando comprendía la explicación pero NO el concepto o la filosofía como tal de Redux, siempre costará al comienzo pero la mejor forma de mitigar las dudas es practicar y practicar mucho, si y solo si se comprende el fondo de Redux de esta manera.

Les doy un consejo, después de ver todo el curso vuelve a ver esta clase, solo así vas a entender todo

Les cuento mi auto-reto: hice apuntes de cada clase. Mañana voy a hacer todo lo que se hizo hasta acá sin ver los videos.
Solo me perimitiré consultar mis apuntes.
Si me sale cerveza en la cena!!!

Me encanta como recapitula todo lo del módulo, siento que muchos cursos mejorarían si se recapitula de esta manera. Una excelente clase!

Excelente. La parte teórica-visual me hace entender mucho mejor todo.

Muy buena la explicación lo he entendido mejor y la vez refuerzo lo que explicó el profe con este post que tiene un ejemplo muy práctico :3
https://dev.to/hemanth/explain-redux-like-im-five

A ver si entendí:

Resumen:
El componente (Users) archivo de extensión JSX carga la interface, en el ComponentDidMount() se encarga de llamar la función con this.props.myFunction, el action creator tiene la promesa por que se comunica con la api (URL con datos), trae los datos de la api y se los entrega al reducer (modifica el reducer) para que el reducer pueda crear un estado diferente (estado nuevo), la modificación la hace con el dispatch que con los datos type (Nombre definido para identificar el action type) y el payload (donde se asignan los datos), el reducer viene siendo el estado, ese estado nuevo va y actualiza en el JSX (pantalla Users), esto se logra porque se comunican por medio del masStateToProps que se configuró en el JSX de Users, de esta misma forma se repite y continua el ciclo.

Súper! ya me estaba impacientando de escribir código y no entender como funcionaba

Flujo de datos asincrónico de Redux

Repetí este video 548.247’126.247 veces! joder, por fin entendí lo de las clases anteriores. Muchas gracias.

• Ser yo
• estar en curso de react y redux escuela de JS
  -No entender nada
  -ser yo 15 días en el curso de bedu
• mi mente entendiento toda esta vuelta
  

Les dejo esta ayuda
https://platzi.com/tutoriales/1613-redux/7275-clase-19-explicacion-de-flujo/
^^ ❤️ saludos

Solo para mejorar un poco el mensaje del profesor en esta explicación: No debemos ligar lo que es jsx en si con el componente de react. JSX es solo una forma de crear elementos en react de forma más amigable. JSX no se conecta a nadie, es el componente de react en si a través de sus props quien conecta con los reducers a través de los actions creados y asociados al componente.

Buenas, les dejo por aquí los apuntes que estoy haciendo de Redux del curso. Además le estoy añadiendo algunas cosas extra, e iré actualizandolo a medida que vaya encontrando más recursos. Espero que les sea de utilidad 😃
Apuntes de Redux

Explicación teórica: ciclo completo de Redux

1. El componente (JSX) se comunica con las acciones.
2. La acciones hablan con el reducer.
3. El reducer se comunica con el componente.
4. Volvemos al paso 1.

JSX carga la vista, llama al action creator gracias al this.props.functionName(). El action creator tiene una promesa, la cual va y modifica al reducer(estado) gracias al dispatch. Finalmente el estado actualiza al JSX gracias al mapStateToProps.

aqui todo toma forma

Se podría decir que la acción no solo le indica qué proceso realizar al reducer, también le da la información necesaria para hacerlo (en este caso, los usuarios) y el reducer genera no una actualización, más bien una nueva versión del estado. Usa …state para incluir la pasada y después añade los cambios.

I can feel the power !!

Wuou, Muy buena explicación!!

xcelente explicacion, ahora si pude entender el ciclo completo de redux. El diagrama fue clave y compararlo con las funciones que hicimos en el codigo.

Les comparto mi solucion, complementando todo lo aprendido hasta ahora (usando funciones en vez de clases - estoy viendo el curso en 2022) :

• archivo users.js

import React from 'react'
import Error from '../Error';
import Loading from '../Loading';
import UserList from './UserListConReducer';
import useFetchUsers from '../../Hooks/useFetchUsers'

export default function Users() {
    const {
        loading,
        error,
        users,
    } = useFetchUsers();

    return (
        <div className="container py-3">
            { (error && !loading) && ( <Error error={error}/> ) }

            { loading && ( <Loading/> ) }

            { (!loading && !error) && <UserList users={users} />  }

        </div>
    )
}

• archivoUserListConReducer

import React, {useEffect} from 'react';
import { connect } from 'react-redux';
import * as usersActions from '../../Actions/usersActions';

/**
 * Lista de usuarios accediendo al reducer (estado compartido global)
 * @param {*} param0
 * @returns
 */
// function UserList({users}) {
function UserList(props) {

    // Confirmamos que los usuarios gloables del reducer vienen dentro de las props
    // props.fetchAll();
    console.log("UserList ~ props", props)

    // El componente principal users deberia llamar a fetchAll() pero separe los archivos y este componente es el que adquiere las usersActions y tiene por dentro de sus props fetchAll().
    // Ademas estoy usando funciones que no tienen componentDidMount, por eso fue necesario user el effecto
    useEffect( ()=>{
        props.fetchAll(props.users);
    },[props.users] );

    return (
        <div>
            <h2 className="display-6 text-center mb-4">Usuarios</h2>

            <div className="table-responsive">
                <h3 className="display-6 text-center mb-4">Usuarios Globales (reducer)</h3>
                <table className="table text-center table-hover">
                    <thead>
                        <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Website</th>
                        </tr>
                    </thead>
                    <tbody>

                        {props.usuariosglobales.map(user => (
                            <tr key={user.id}>
                                <th scope="row">{user.id}</th>
                                <td>{user.name}</td>
                                <td>{user.email}</td>
                                <td>{user.website}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

/**
 * Esto le agrega el usersReducer a las props, asi hay acceso a usuariosglobales
 * @param {*} reducers
 * @returns
 */
const mapStateToProps = (reducers) => {
    return reducers.usersReducer;
};

export default connect( mapStateToProps, usersActions)(UserList);

Finalmente la carpeta Reducers, esta esta tal cual la explico el profesor en este curso

• archivo index.js

import { combineReducers } from "redux";
import usersReducer from "./usersReducer";

/**
 * Esta funcion combina todos los reducers que se encuentren en esta carpeta
 */
export default combineReducers ({
    usersReducer
});

• archivo usersReducer.js

const INITIAL_STATE = {
    usuariosglobales: []
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'fetch_users':
            return {
                ...state,
                usuariosglobales: action.payload
            }

        default:
            return state
    }
}

Lo mejor para comprender a profundidad Redux, es primero comprender cómo funciona la arquitectura FLUX.
Es la que nos permite pensar de forma unidirección en el flujo de datos en un App, así, entendemos mejor Redux.

Redux contiente tres partes desacopladas y funcionan así:

1. Tipo de acciones: Indica el tipo de acción o evento que se va ejecutar.
   ·

2. Acciones: Importa los tipos de acciones y devuelve un objeto por la acción ejecutada.
   ·

3. Reducers: Son funciones que reciben dos parámetros:

   • El estado anterior ( es el objeto que devuelve la acción ), y
   • los datos

   LOS REDUCERS DEVUELVEN UN NUEVO ESTADO.

   Los Reducers son FUNCIONES PURAS, es decir, solo va recibir el estado anterior y los datos para devolver el nuevo estado, no va a tomar datos de otros componentes, ni llamar a APIs. nada de eso.
   ·

4. Store: Toma todos los reducers de la aplicación (los nuevos estados) y los convierte en props para que cualquier componente hijo que lo necesite acceda a dichos estados.

────
────

Redux funciona de forma centralizada y distribuye el estado de la aplicación a través de los props hacia los componentes hijos.

Me encanta el curso pero me gustaria tambien leer la documentación oficial

Gracias por la aclaración

Super! Excelente explicacion.

excelente explicación…

Muy Buena explicación

Excelente explicación, es bueno que repasemos esto después de hacer el código para manejar el estado

owwww, que gran explicación la del profe

Bien ahora a verlo en código

Cuando nuestro componente terminar de cargar (componentDidMount) llama al Action Creator, luego el Action Creator contiene la promesa, trae los datos necesarios y luego va y modifica al Reducer para que actualice el estado usando dispatch() y luego lo actualizamos en el componente con el mapStateToProps.

Si no tenemos estos pasos no nos va a funcionar.

todo es tan claro ahora ! me gusta mucho que recapitulen todo lo del modulo de manera grafica

Ya entiendo mejor el ciclo de Redux, al principio no sabia ni que era, ahora ya tengo las bases para conocer su ciclo.

![](

Explicación teórica: ciclo completo de Redux

Cuando nuestro componente terminar de cargar (componentDidMount) llama al Action Creator, luego el Action Creator contiene la promesa, trae los datos necesarios y luego va y modifica al Reducer para que actualice el estado usando dispatch() y luego lo actualizamos en el componente con el mapStateToProps.

Si no tenemos estos pasos no nos va a funcionar.

una explicación fundamental y en el momento justo, excelente!

Al principio no entendía, pero después de ver el módulo por segunda vez, ya me quedó todo claro ^_^

Esta clase es brutalmente buena, explicaste re bien Rodolfo!

Ahora todo tiene sentido!!

Será porque tome primero el curso practico de react y redux que no entendia nada y me puse a leer la documentación, ahora que recien tomo este curso que no me siento tan perdido.

Un proceso completo que hubiera querido que me lo explicaran cuando trabajaba en React con Redux, excelente