Reducers

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

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

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

Necesitamos política anti-haters en los comentarios.

Cada ves se pone mejor.

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';

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

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
    }
}```

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

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.

Excelente clase. 🙂

ahh con razón (si lo dije)

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

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

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

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

1. por medio de la recepción de dos parámetros: el estado y una acción,
2. 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,
3. procesan / operan la información que llegó, y
4. devuelven todo en un objeto.

─

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

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.

Hay que ir despacio gente! Solo vayan despacio!

Creamos el primer reducer, llamado “usuariosReducer.js”:

const INITIAL_STATE = {
  usuarios: [],
};

export default (state = INITIAL_STATE, action) => { //* El estado es el initial state que regresa una función
  switch(action.type) {
    case 'traer_usuarios':
      return { ...state, usuarios: action.payload }

    default: return state;
  }
}

Y esto lo importamos en index.js de la carpeta reducers:

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

export default combineReducers({
  usuariosReducers
});

Buen video y por fin solucione mi error ahora si descansare un rato para no aburrirme facilmente.

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.

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

Confuso pero supongo que todo se ira aclarando

Hola Devs:
-Por mi parte lo hice de una manera un poco mas simple a mi parecer, aqui esta mi solucion:

Correcto, ya centralizamos el estado un un único lugar.
Es clara el paso a paso de lo que estamos observando. Sin embargo, es importante que se vaya explicando la importancia del orden que se está llevando.

Para los que están usando VSCode con la extensión de Material Icon Theme y no les carga los iconos de las carpetas, pueden usar el siguiente comando

>material-icon-theme.toggleIconPacks

Después seleccionan React + Redux

PD: los comandos se lanzan con ctrl + p (cmd + p).

y en que version de react funsiona este reducer porque a mi me explota

const INITIAL_STATE = {
    users:[]

};

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

            default:{
                return state
            }
    }
}