# Manejar el estado de aplicaciones ReactJS de manera sencilla y eficiente


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 como`create-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.

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:

o

Puedes revisar la documentación completa de este paquete en [react-context-manager](#).

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

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 esto```react-context-manager``` y el cliente facilita el trabajo.

Para efectos de este ejemplo vamos a crear dos 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***.

El CLI nos permitirá crear estos nuevos componentes conectados al store que necesitemos.

rcmc create-component Hook Hoc

Primero nos preguntará si el componente *Hook* queremos que sea un Function Component o un Class Component. En este caso, queremos que sea un Function Component y luego el cliente nos preguntará a qué store queremos conectar nuestro componente, con la barra espaciadora marcamos *user*. Para el componente Hoc, debemos elegir un *Class Component* y conectarlo también al store *user*

Ya con esto tenemos los componentes *Hook* y *Hoc* creados. Solo nos queda cambiar nuestro código para colocar un botón que ejecute la acción y cambie el nombre en cada componente.

Así quedaría el componente ***Hook***:

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

Así quedaría el componente ***Hoc***:

***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/Hoc';
import Hook from './components/Hook';

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.


## Autor
- Fernando Galíndez ([e-mail])

## Contribuciones
- Juan Perozo ([e-mail])
- Max Rondón ([e-mail])
- Gustavo Sinovsky ([e-mail])