For anyone who wants to skip the article by just the spanish language please use the google translator and read the article till end.

[source google]

REPOSITORY:

https://github.com/martyjs/marty

La idea basica:

Cualquier herramienta de administración de estado necesita solo un par de cosas: un valor de estado global disponible para toda la aplicación, así como la capacidad de leerlo y actualizarlo.Solo para mostrarle lo simple que puede ser un administrador estatal.

Gestión del Estado en React:

Para poder crear una versión basada en React de nuestra solución anterior, necesitaremos aprovechar dos características de React.
La primera característica son los componentes de clase antiguos, a.k.a componentes de estado.
La segunda característica es la API de contexto,que se utiliza para poner los datos a disposición de toda su aplicación React.

Construyendo nuestro administrador estatal:

Ahora conocemos las herramientas que queremos utilizar,Es solo un caso de juntarlos.
En primer lugar, vamos a crear nuestro contexto utilizando # React.createContext # Esto nos da nuestro Proveedor y Consumidor:

1. import { createContext } from 'react';
2. 
3. const { Provider, Consumer } = createContext() 

Siguiente,Necesitamos envolver a nuestro Proveedor en un componente con estado para poder aprovecharlo para administrar el estado de nuestra aplicación.
También queremos exportar al consumidor con un nombre más específico:

1. import React, { Component, createContext } from 'react';
2.
3. const { Provider, Consumer } = createContext();
4.
5. export const StateConsumer = Consumer;
6.
7. export class StateProvider extends Component {
8.  static defaultProps = {
9.    state: {}
10.  };
11.
12.  state = this.props.state;
13.
14.  render () {
15.    return (
16.      <Provider value={this.state}>
17.        {this.props.children}
18.      </Provider>
19.    );
20.  }
21. }

En el ejemplo de código anterior, nuestro StateProvider es simplemente un componente que acepta un prop de estado como estado inicial y hace que todo lo que está contenido en ese prop esté disponible para cualquier componente debajo de él en el árbol de componentes.Utilizar nuestro StateProvider es tan simple como envolverlo alrededor del componente raíz de nuestra aplicación:

1. import { StateProvider } from './stateContext';
2. import MyApp from './MyApp';
3.
4. const initialState = {
5.  count: 0
6. };
7.
8. ex/port default function Root () {
9.   return (
10.    <StateProvider state={initialState}>
11.      <MyApp />
12.    </StateProvider>
13.  );
14. }

Ahora que hemos hecho eso, podemos acceder a nuestro estado desde cualquier lugar dentro de MyApp usando un consumidor. En este caso, también hemos inicializado nuestro estado para que sea un objeto con una sola propiedad: contar, por lo que cada vez que accedamos a nuestro estado, eso es lo que encontraremos.
Los consumidores utilizan hacer apoyos para pasar los datos de contexto, esto se puede ver a continuación, donde una función es hija de StateConsumer , los state El parámetro pasado a esa función representa el estado actual de nuestra aplicación, así como por nuestro initialState , state.count será igual a 0.

Lo continuaremos en otra parte,

To Be Continued :

UPVOTE FOLLOW AND SHARE..