Reducers

Clase 14 de 57 • Curso de Redux por Bedu

Resumen

Las Action Creators describen que algo pasó, pero no especifican cómo cambió el estado de la aplicación en respuesta. Esto es trabajo de los reducers.

El Provider es el componente de Redux en el cual encerraremos nuestra aplicación para que puedan comunicarse los componentes entre ellos.

Julián Andrés Vela Salazar

student•

Este si es un verdadero curso, una vez tome uno de Leonidas de este tema, quede mas aburrido jajaja

Jonatan Ariste

student•

No lo sé Rick... Toda la parte de Reducers no se explico nada de momento, ojala mas adelante se explique todo pero por ahora la parte de export default (state = INITIAL_STATE, action) => whaaaaaaaat

Angel Enrique Barrios

student•

en español, Los reducers son funciones puras que reciben como parámetros, el estado inicial y una acción ,

//aquí se crea la función, el estado inicial es un objeto vacío, y la acción es la //"tarea a realizar"
function reducer(state = {}, action){
//se crea el switch porque llegaran varias tareas y solo se distingue por el //nombre 
    switch(action.type){
//la tarea que llegara en esta ocasión es 'traer_usuarios'
        case 'taer_usuarios':{
//esta parte es destructurar el estado que es un objeto curso de fundamentos //de JavaScripts muy bueno 
            return{...state,  usuarios: action.payload}
        }
//despues de todo eso de exporta el reducer y ya esta 

export default reducer;

David Acevedo

student•

Redux es de esas cosas que al principio hay que tener fe, y poco a poco todo se va entendiendo.

Jimmy Ottoniel Gabriel Roquel

student•

Una de las mejores inversiones que realizado. Exelete servicio profesor 5 estrellas :D

Fabio Chiummiento

student•

Necesitamos política anti-haters en los comentarios.

Roberto Del Valle

student•

Cada ves se pone mejor.

Robert Romero Medina

student•

A mi me salio el siguiente error :

`Failed to compile
./src/redurcers/index.js
Module not found: Can't resolve 'usuariosReducer.js' in 'C:\Users\Robert02\Desktop\blogplatzi\src\redurcers'
This error occurred during the build time and cannot be dismissed.`

yo lo solucione cambiando la ruta de redurcers en el Index.js principal

Antes:

import redurcers from './redurcers';

Despues:

import redurcers from './redurcers/usuariosReducer';

Juan Esteban Orozco Botero

student•

Posdata: con configStore no es necesario usar combineReducers, si no que se pasan como un objeto directamente a conbineReducers

crear carpeta de reducers y el index.js de esta carpeta, donde se crearan los reducers.
encapsular las rutas con Providers, estas rutas pueden tener acceso al store.
crear estado inicial de usuarios en la carpeta de reducers y archivo de reducer de usuarioReducer .
Crear el reducer de usuarios que recibe como parametros el estado inicial y el action.
importar en el index.js de reducers el de usuarioReducer.

Cristofher Jumbo Jimenez

student•

He usado tanto context que me quede loco al ver que el atributo era store y no value jajahaha

Edgar Lopez Arroyo

student•

const INITIAL_STATE = {
    users: []
};

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'get_users': 
            return { ...state, users: action.payload }
        default: 
            return state
    }
}```

Eddi Garcia Bermejo

student•

Debió ponerle más zoom la barra de exploración en el editor, eso no se ve nada

Paul Cortes

student•

Reducers

Las Action Creators describen que algo pasó, pero no especifican cómo cambió el estado de la aplicación en respuesta. Esto es trabajo de los reducers.

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Ivan Francisco

student•

ahh con razón (si lo dije)

Paul Cortes

student•

El Provider es el componente de Redux en el cual encerraremos nuestra aplicación para que puedan comunicarse los componentes entre ellos.

Leandro Terrado

student•

En realidad, Provider es un componente de la dependencia de 'react-redux'. Hago la aclaración porque redux es valido para usar en otros frameworks como Angular.

Saludos,

Jorge Salamanca

student•

Y hace que el store esté disponible para los componetes anidados e incluidos en la funcion conect()

Jorge Luis Sanchez Barreneche

student•

me aparece este error en userReducer Line 6:11: 'action' is not defined no-undef

Santiago Ventura

student•

ME SALE ESTE ERROR: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Nahuel Castro

student•

No entiendo por qué en este curso en comparación al de react.js se utiliza la nomenclatura index.js dentro de cada carpeta en vez de generar componentes con nombre propio. ¿Cuál estrategia es mejor? Muchas gracias.

Alexis Alberto Texis Auza

student•

hola nahukas,el motivo por el cual se nombra a un archivo como index.js, es para que podamos indentificar que este es la raíz o el componente principal,que puede estar o no, conformado de otros componentes(por ejemplo el componente USUARIOS)

Sin embargo tu podrias ponerle el nombre que quieras y no habría ningún problema.

Favio Náquira

student•

Yo utilizo generalmente la que mencionas, pero esta me parece más clara, por ejemplo cuando usamos Tabla.js:

import Tabla from './Tabla/Tabla'

es algo redundante, pero cuando usamos index.js

import Tabla from './Tabla'

se entiende mucho mejor. Particularmente, voy a utilizar esta estrategia para el caso de componentes que tengan un solo archivo y no varios dentro de su carpeta.

Sebastian Rios Sabogal

student•

Excelente curso, muy bien explicado.

Andrés Felipe Eslava Zuluaga

student•

Los 3 conceptos de Redux: ++Cambios con funciones puras:++

Sucede que en el modelo de Flux nos dice que hay un Hub Central que realiza un despacho de acciones. Las acciones son provocadas por la vista / el usuario / la interfaz, que desencadena un tipo de acción o tipo de evento. Estas acciones son despachadas para que el Store entienda que debe ocurrir un cambio / actualización en los datos. ─ Dentro de Redux, las actualizaciones se hacen por medio de FUNCIONES PURAS que

por medio de la recepción de dos parámetros: el estado y una acción,
toman el estado actual (o estado anterior, que es la acción en forma de objeto) y los datos que están llegando con la acción,
procesan / operan la información que llegó, y
devuelven todo en un objeto.

─

Cabe resaltar que no va a tomar datos de otros componentes, ni hacer llamados a APIs.

Andrés Felipe Eslava Zuluaga

student•

CombineReducers:

Es un método que pertenece a la API de Redux y permite organizar los objetos de estado de una mejor forma: este orden permite un mejor acceso a los datos via props y la escritura de código de haga más legible. · Su función es que convierte un objeto cuyos valores son diferentes funciones reducer en una única función reducer que se puede pasar a createStore.

Reducers

Bienvenido al curso

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

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

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

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación