Manejar el estado de aplicaciones ReactJS de manera sencilla y eficiente

7 min readFeb 11, 2020

Empezar un proyecto desde cero puede ser un proceso complejo y tedioso, especialmente a la hora de decidir la estructura a utiliza y los paquetes y dependencias que definirán la naturaleza del proyecto durante toda su vida útil.

Herramientas comocreate-react-app siempre han sido un buen punto de partida, con respecto a cuales paquetes instalar, y a su vez, generar una pequeña estructura básica de archivos, la cual tendrá el código que la aplicación ejecutará.

Pero esto representa sólo la punta del iceberg, en comparación a lo que conlleva una aplicación real en producción. Manejar los distintos Componentes y la creciente complejidad del Estado, son de los principales desafíos a enfrentar cuando se construye una aplicación web usando ReactJS.

En el caso del manejo del estado, existen herramientas, Redux siendo de las más usadas, que establecieron un estándar, una estructura que ayuda a mantener el estado consistente, a medida que éste crece en complejidad.

Redux tiene una suite completa, producto de su propia versatilidad y amplio alcance, lo que produce una estructura que tiende a ser muy verbosa, donde hay que escribir múltiples líneas de código para lograr algo tan sencillo como, por ejemplo, incrementar un simple contador.

Por otro lado, ReactJS introdujo recientemente Context API para manejar el estado de la aplicación de forma nativa, a través de componentes especiales denominados Consumer y Provider, además de la implementación de Hooks en versiones más recientes, los cuales permiten acceder al estado y otras funcionalidades de ReactJS sin utilizar clases.

¿Pero cómo se usa todo esto? ¿Hay un estándar de implementación? ¿Cómo logro usar estas herramientas de una manera eficiente con mis componentes? ¿Cómo construyo un Store de mi aplicación? Esas son algunas de las preguntas que pueden surgir si estás empezando a usar ReactJS hoy, o si simplemente no has pasado por la curva de aprendizaje ideal de las nuevas tendencias en ReactJS.

En base a todas estas inquietudes y tratando de reunir las mejores prácticas de varios modelos exitosos como el de Redux, hemos construido una suite llamada React Context Manager que te hará mucho más fácil la tarea de generar y gestionar el store de tu aplicación ReactJS.

¿De qué trata React Context Manager?

React Context Manager, consta de 2 paquetes:

react-context-manager un paquete que deberás instalar en tu aplicación de forma local y te ayudará a conectar tu Store a tus componentes.
react-context-manager-cli un paquete que deberás instalar de forma global en tu máquina y te ayudará a crear la estructura de tu Store.

¿Cómo usar React Context Manager?

En primer lugar debes crear tu proyecto, que en este caso recomendamos que sea con create-react-app. Puede ser en Javascript o Typescript. En este caso lo haremos con Typescript.

npx create-react-app hello-project --template typescript

Aquí conseguirás un proyecto con una estructura como esta:

hello-project
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.ts
    App.test.ts
    index.css
    index.ts
    logo.svg

Luego de esto debemos instalar el paquete react-context-manager dentro de nuestra aplicación:

npm install --save @talpor/react-context-manager
o
yarn add @talpor/react-context-manager

Puedes revisar la documentación completa de este paquete en react-context-manager.

También debemos instalar la CLI de este mismo paquete:

npm install -g @talpor/react-context-manager-cli

Puedes revisar la documentación de la CLI en react-context-manager-cli.

Inicialización

Una vez instalados los paquetes, corremos el siguiente comando desde la carpeta raíz del proyecto en la terminal:

react-context-manager-cli init

o alternativamente:

rcmc init

Esto creará la estructura básica de tu store dentro de la carpeta /src/ de la siguiente manera:

Una carpeta /store
Un archivo ***index.[js|ts]

index.ts ejemplo inicial

/** This is a auto-generated file, please do not modify it*/ 
import { GlobalStore, initContext, Modifiers } from '@talpor/react-context-manager';export interface IStore extends GlobalStore {}export interface IActions extends Modifiers<IStore> {}const store: IStore = {}const actions: IActions = {}const ctx = initContext<IStore, IActions>();export { actions, ctx, store };

Conectando al store

Después de esto debemos importar ContextProvider de la librería en el index.tsx de la carpeta /src/. También debemos importar los actions, el ctx y el store en este mismo archivo e inyectarlos dentro del <ContextProvider actions={actions} context={ctx} store={store}>.

La idea principal es que el contexto sea utilizado por todos sus componentes hijos, solo que para efectos del ejemplo, lo colocamos en el nivel más alto para tener un contexto global.
ejemplo index.tsx de nuestra app

import React from 'react';
import ReactDOM from 'react-dom';/** importa las dos siguientes líneas */
import { ContextProvider } from '@talpor/react-context-manager'; 
import { actions, ctx, store } from './store';ReactDOM.render(
/** encapsula el componente <App /> dentro del ContextProvider */
  <ContextProvider actions={actions} context={ctx} store={store}>
    <App />
  </ContextProvider>,
  document.getElementById('root')
);

Creando un sub-store

Ya tenemos conectado nuestras Acciones y nuestro Store en nuestra app. Pero todo esto sigue estando vacío. En este ejemplo queremos crear un subStore llamado User y para ello podemos correr en nuestro terminal en la carpeta raiz del proyecto, el comando rcmc create-store user. Esto creará una carpeta user dentro de la carpeta store con:

archivo: store.ts
archivo: actions.ts
archivo: mocks.ts
carpeta: tests.ts

Después de que esta estructura esté creada. El terminal nos preguntará si queremos regenerar nuestro index.ts de nuestro store. En este caso indicamos que si. Cada vez que generemos un subStore lo debemos regenerar.

Nota importante: los cambios manuales en este archivo se borrarán si se vuelve a regenerar el index del store posterior a estos cambios.

actions.ts example

import { Scope } from '@talpor/react-context-manager';import { IStore } from '../index';export interface IUserActions extends Scope<IStore> {
  userAction: (state: IStore) => () => IStore;
  /** Add your others USER actions types here */
}export const userActions: IUserActions = {
  myUserAction: (state: IStore) => () => {
    /** Do your logic here */
    return {
      ...state,
      user: {
        ...state.user,
        /** Your modified USER store */
      },
      /** Any other scope from your store */            
    };
  }
  /** You can add other USER actions here */
};

store.ts example

export interface IUserStore {}export const userStore: IUserStore = {}

index.ts example re-generated

/** This is a auto-generated file, please do not modify it*/ 
import { GlobalStore, initContext, Modifiers } from '@talpor/react-context-manager';import { userStore, IUserStore } from "./user/store"
import { userActions, IUserActions } from "./user/actions"export interface IStore {
  user: IUserStore
}export interface IActions {
  user: IUserActions
}const store: IStore = {
  user: userStore,
}const actions: IActions = {
  user: userActions,
}const ctx = initContext<IStore, IActions>();export { actions, ctx, store };

Agregando un poco de lógica

Agreguemos un elemento a nuestro store:

export interface IUserStore {
    nameHook: string;
    nameHoc: string;
}export const userStore = {
    nameHook: '',
    nameHoc: ''
}

Y ahora agreguemos algo de lógica a nuestras acciones, donde cambiaremos el nombre de nuestra acción de myUserAction a setName:

export interface IUserActions extends Scope<IStore> {
  setName: (
    state: IStore
  ) => (name: string, component: 'nameHook' | 'nameHoc') => IStore;
}export const userActions: IUserActions = {
  setName: (state: IStore) => (
    name: string,
    component: 'nameHook' | 'nameHoc'
  ) => {
    if (name === 'John Doe') {
      name = 'Jane Doe';
    } else {
      name = 'John Doe';
    }
    return {
      ...state,
      user: {
        ...state.user,
        [component]: name
      }
    };
  }
};

Esta acción alternará el nombre entre ‘John Doe’ y ‘Jane Doe’ en cada componente de la aplicación.

Creando componentes conectados a nuestro Store

Ahora debemos conectar nuestros componentes al store y para estoreact-context-manager facilita el trabajo.

Para efectos de este ejemplo vamos a crear 2 componentes, los cuales estarán en una carpeta llamada components dentro de /src/, es decir, a la misma altura del store. Uno usando Hooks y otro usando Class Components.

Supongamos que el primero será un componente llamado Hook. Dentro de este debemos importar de la librería ctx de nuestro store y usar el Hook de ReactJS: useContext.

Function Component “Hook” example with useContext()

import React, { useContext, useEffect } from 'react';
import { ctx } from '../store';function Hook() {
  const store = useContext(ctx.store);
  const actions = useContext(ctx.actions);
  useEffect(() => {
    if (!store.user.nameHook) {
      actions.user.setName('John Doe', 'nameHook');
    }
  }, [actions.user, store.user.nameHook]);  return (
    <div className="Hook">
      <header className="Hook-header">
        <h2>HOOK COMPONENT</h2>
        <h3
          style={{
            color: store.user.nameHook === 'John Doe' ? 'blue' : 'purple'
          }}
        >
          {store.user.nameHook}
          <br />
        </h3>
        <button
          className="Hook-link"
          onClick={() => {
            actions.user.setName(store.user.nameHook, 'nameHook');
          }}
        >
          Change Name
        </button>
      </header>
    </div>
  );
}export default Hook;

Ahora crearemos un componente de Clase llamado Hoc, en el cual debemos importar mapContextToProps:

Class Component “Hoc” example with mapContextToProps()

import React from 'react';
import { ctx } from '../store';import { mapContextToProps } from '@talpor/react-context-manager';class Home extends React.Component<any, any> {
  componentDidMount() {
    this.props.actions.user.setName('John Doe', 'nameHoc');
  }
  render() {
    const { actions, store } = this.props;
    return (
      <div className="Home">
        <header className="Home-header">
          <h2>HOC COMPONENT</h2>
          <h3
            style={{
              color: store.user.nameHoc === 'John Doe' ? 'blue' : 'purple'
            }}
          >
            {store.user.nameHoc}
            <br />
          </h3>
          <button
            className="Home-link"
            onClick={() => {
              actions.user.setName(store.user.nameHoc, 'nameHoc');
            }}
          >
            Change Name
          </button>
        </header>
      </div>
    );
  }
}export default mapContextToProps(ctx)(Home)('user');

Inyectando los componentes en el App.tsx

Agreguemos nuestros components creados en el App.tsx

ejemplo App.tsx de nuestra app

import React from 'react';
import './App.css';
import Hoc from './components/homeHoc';
import Hook from './components/homeHook';const App = () => {
  return (
    <div className="App">
      <Hoc />
      <Hook />
    </div>
  );
};export default App;

Resultado

Con esto, tenemos un ejemplo listo de cómo manejar el estado de una aplicación ReactJS con la suite react-context-manager, que nos facilitará la construcción y manejo del store y los actions además de estandarizar la estructura de nuestras aplicaciones.