Principios Básicos de Redux

En Redux existen conceptos que es importante conocerlos y por eso hoy hablaremos sobre ellos.

Redux: Actions

En Redux existen las Actions que no son más que las definiciones de Acciones que realizara nuestro reducer para manipular el estado de nuestra aplicación. Por ejemplo:

export const SET_LOGIN_USER ='SET_LOGIN_USER';

Como podemos notarlo la Action es lo que queremos ejecutar, puedes definir cuantas Actions se requieran, pero ten cuidado porque podrían llegar a ser difíciles de manejar en caso de no utilizarlos correctamente.

Redux: Action Creators

Las ActionCreator son las funciones que nos ayudan a crear una Action estas hacen que recibamos un objeto y lo transformemos a un objeto de redux, el cual tiene una type y un payload.

Asumamos que hemos creado un archivo con nombre actionTypes, el cual importaremos en nuestro archivo actionCreator.

import * as ActionTypes from './actionTypes'
export const SetUserLogin = (userAccount)=> {
   return {
      Type: ActionTypes.SET_LOGIN_USER,
      payload: {
         userAccount
      }
   }
}

Redux: Reducers

Finalmente, el concepto que le da esencia a Redux, los reducers, estos no son más que funciones puras, igual que los anteriores, pero que son las que hacen que nuestra implementación de Redux, llegue a feliz término.

Los reducer combinan las ActionTypes y permiten a nuestra aplicación modificar su estado. Para este ejemplo tendremos siempre en cuenta que hemos creado el archivo actionTypes.

import * as ActionTypes from './actionTypes';

const userDefaultState = { userId: '', userName: '', isLogged: false }

export const userLoginReducer = (state = userDefaultState, action) => {
    switch (action.type) {
        case actionTypes.SET_USER_LOGIN:
            let user = action.payload.userAccount;
            state = {...state, userId: user.userId, userName: user.userName, isLogged: user.isLogged }
            return state;
        default:
            return state;
    }
}

Como observamos, el reducer ejecuta la action que ha sido disparada dispatch desde un componente por nuestro usuario.

De este modo ya hemos visto los tres elementos necesarios para implementar Redux. Hasta la próxima.

¡Happy Hacking!