Tienda Redux en React Native

En este artículo, vamos a aprender sobre Redux Store. Es el objeto que contiene el estado de la aplicación. La tienda es uno de los componentes básicos de Redux. Redux es una biblioteca de gestión de estado utilizada en aplicaciones de JavaScript. Se utiliza para gestionar los datos y el estado de la aplicación.  

Usos de Redux: con la ayuda de redux, es fácil administrar el estado y los datos. A medida que aumenta la complejidad de nuestra aplicación. Al principio, es difícil de entender, pero realmente ayuda a crear aplicaciones complejas. Al principio, se siente como mucho trabajo, pero es realmente útil.

Tienda: una tienda es un objeto que contiene todo el estado de la aplicación. Con la tienda, podemos mantener y acceder al estado actual de la aplicación. Cuenta con un método de despacho que permite actualizar el estado de la aplicación. También puede registrar y anular el registro de las devoluciones de llamada del oyente. La aplicación Redux solo puede tener una sola tienda. 

Para crear la tienda en nuestra aplicación. Usamos la API createStore de la biblioteca redux. Este método se utiliza para crear una tienda de la aplicación redux.

Sintaxis: 

const store = createStore(reducer);

Como podemos ver en la sintaxis, el método createStore tiene un argumento reductor. Ahora bien, ¿qué es un reductor? Los reductores son las funciones puras que toman el estado actual y la acción y devuelven el nuevo estado y le dicen a la tienda cómo hacerlo.

También podemos crear la tienda usando la siguiente sintaxis:

createStore(reducer, [preloadedState], [enhancer])

• preloadedState: este argumento es opcional. Se puede utilizar para los datos iniciales de la aplicación.
• potenciador: este también es un argumento opcional. Puede cambiar la forma de comportamiento de la tienda. Básicamente, mejora la tienda con capacidades de terceros, como middleware, viajes en el tiempo, persistencia, etc.

Métodos importantes de la tienda:

getState(): este método se utiliza para obtener el estado actual de la tienda.

Sintaxis:

store.getState()

dispatch(action): este método se utiliza para cambiar el estado de la aplicación. Pasa el objeto de acción como un argumento. Básicamente, después de enviar la acción, la tienda ejecutará su función de reducción (una función pura que toma el estado y la acción actuales y devuelve el nuevo estado, y le dice a la tienda cómo hacerlo). Y guarde el nuevo valor dentro de él. Luego, la tienda llama a las devoluciones de llamada del oyente.

El método de envío toma acción como argumento. Ahora bien, ¿qué es la acción? Las acciones son objetos de JavaScript que contienen información. Las acciones son la única fuente de información para la tienda.

Sintaxis:

store.dispatch({ type: 'Action' })

Suscribirse: este método se utiliza para mantener la array de devoluciones de llamada del oyente. Estos oyentes serán llamados por redux Store después de que se haya enviado la acción. Devuelve una función para eliminar el oyente. 

Sintaxis:

store.subscribe(()=>{ console.log(store.getState());})

Ahora sabemos sobre la tienda y su método. A continuación se muestra un ejemplo de cómo crear una aplicación react-redux.

Pasos para crear una aplicación React-Redux:

Paso 1: Inicialmente, cree una aplicación React usando el comando mencionado a continuación:

npx create-react-app MyApp

Paso 2: después de crear la carpeta de su proyecto (es decir, MyApp), muévase a ella usando el siguiente comando.

cd MyApp

Paso 3: una vez que haya terminado de crear la aplicación ReactJS, instale redux y react-redux

npm install redux react-redux

Estructura del proyecto: Tendrá el siguiente aspecto:

novia

Ejemplo: En este ejemplo, hemos creado dos botones, uno incrementará el valor en 2 y otro disminuirá el valor en 2 pero, si el valor es 0, no disminuirá, solo podemos incrementarlo. Con Redux, estamos administrando el estado.

import React from "react";
import "./index.css";
import { useSelector, useDispatch } from "react-redux";
import { incNum, decNum } from "./actions/index";
  
function App() {
    const mystate = useSelector((state) => state.change);
    const dispatch = useDispatch();
    return (
        <>
            <h2>Increment/Decrement the number by 2, using Redux.</h2>
            <div className="app">
                <h1>{mystate}</h1>
                <button onClick={() => dispatch(incNum())}>+</button>
                <button onClick={() => dispatch(decNum())}>-</button>
            </div>
        </>
    );
}
  
export default App;

export const incNum = () => {
    return { type: "INCREMENT" }
}
  
export const decNum = () => {
    return { type: "DECREMENT" }
}

const initialState = 0;
  
const change = (state = initialState, action) => {
    switch (action.type) {
        case "INCREMENT": return state + 2;
        case "DECREMENT":
            if (state == 0) {
                return state;
            }
            else {
                return state - 2;
            }
        default: return state;
    }
}
  
export default change;

import change from './func'
import { combineReducers } from 'redux';
  
const rootReducer = combineReducers({
    change
});
  
export default rootReducer;

import { createStore } from 'redux';
import rootReducer from './reducers/index';
  
const store = createStore(rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__());
  
export default store;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx'
import store from './store';
import { Provider } from 'react-redux';
  
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById("root")
);

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción: