Bienvenido al curso

1

Conoce a tu profesor y todo lo que aprenderás sobre Redux

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Store

13/57
Recursos

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)

Aportes 29

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Cabe destacar que Redux no es una librería exclusiva de React, esta puede trabajar en conjunto con otras herramientas como Ember, Vanilla JS, Angular, JQuery, etc. Se basa, con ciertas variaciones, en la arquitectura Flux (propuesta por Facebook para React) y esta es una de las principales razones por las que funciona tan bien con React. Aún a pesar de esto es necesario emplear un enlace o binding para trabajar con React, por eso se instala el paquete react-redux.

Lo que yo hice para la parte de App.js fue crear un componente llamado Layout. Principalmente para no editar directamente el componente App.js y dejarlo más limpio.

App.js

const App = () => (
  <BrowserRouter>
      <Layout>
        <Switch>
          <Route exact path="/" component={Users} /> 
          <Route exact path="/tasks" component={Tasks} /> 
        </Switch>
      </Layout>
  </BrowserRouter>
)

Layout.js

class Layout extends Component {
    render(){
        const {children} = this.props;
        return(
            <Fragment>
                <Menu />
                <div className="margin">
                    {children}
                </div>
            </Fragment>
        )
    }
}

Creo que la manera de explicar del profe debugeando cada paso desde la nada, linea x línea, función x función y archivo por archivo, le da un plus muy grande al curso.

Instalacion

$ npm install redux react-redux

yo pense quedarme en este video pero con ese error no puedo dormir tranquilo debe seguir viendo mas videos hasta solucionarlo. xd

Instalación de Redux
Para usar redux, necesitamos instalar la librería

  • npm install redux react-redux

Instalamos redux con npm install redux react-redux, los importamos en index.js (el punto de entrada de nuestra app), y creamos un store (almacenamiento para proveer esa info a toda la aplicación) pero da un error porque no le estamos dando los reducers.

Configuración inicial (incompleta) para activar redux en react


import { createStore } from "redux";
import { Provider } from "react-redux";


const store = createStore(

	{}, //all reducers	
	{} //initial state
);

ReactDOM.render(
	<App />, 
	document.getElementById('root')
);

El profe es re capo!!

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)

redux y react-redux son unas dependencias de tu proyecto, debería instalarlas como tal pienso yo.

import { createStore } from "redux";
import { Provider } from "react-redux";

const store = createStore(
    
);```
  1. instalar redux. e importar configStore y Provider
  2. crear el estado en una constante en el index.js ppal, de momento todo se crea vacío, pero deben ir Reducers y el estado inicial.

Los 3 conceptos de Redux:
Única fuente de la verdad:

Redux nos propone el uso de un único store: todo el estado queda almacenado en un árbol. Un objeto global, al cuál los componentes van a poder acceder por su contenido, el estado.
·

  • Hay algo que se debe entender: El 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.

Hasta ahora lo que llevamos…
App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Menu from './Menu';
import Todos from './todos';
import Users from './users';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      
    }
  }
  
  render() {
    return (
      <Router>
        <Menu />
        <Route exact path="/users">
          <Users />
        </Route>
        <Route exact path="/todos">
          <Todos />
        </Route>
      </Router>
    );
  }
}

Hay que instalar npm i redux react-redux.

Agregamos al archivo index.js:

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(
  {}, // Todos los reducers
  {}, // Estado inicial
);

Excelente clase. A seguir aprendiendo. 🙂

Contiene el estado de la aplicación

Maneja la anuliación del registro de los listeners via el retorno de la función de subscribe(listener)

Registra los listeners vía subscribe(listener)

Permite que el estado sea actualizado vía dispatch(action)

Permite el acceso al estado vía getState()

Store

El store tiene las siguientes responsabilidades:

Alguien sabe como hacer para que sublime text, reconozca automaticamente la sintaxis de react?

Esto del Redux facilita mucho mas las cosas, cada vez lo veo mas claro

createStore: Para definir el store donde vamos a almacenar todos los reducers y su estado inicial

import { createStore } from 'redux';
import { Provider } from 'react-redux';
const store = createStore(
  {}, //All the reducers
  {}, //Initial state
)

ya empezamos con la clase redux …