¿Qué es una tienda en Redux?

Redux es la biblioteca de administración de estado que se usa en las aplicaciones de JavaScript . Se utiliza para administrar el estado de los datos y acceder a ellos a nivel de diferentes componentes en la aplicación. En redux, hay tres partes de la siguiente manera:

• Comportamiento
• reductor
• Tienda

Store: Es un objeto que proporciona el estado de la aplicación. Este objeto es accesible con ayuda del proveedor en los archivos del proyecto. La única forma de cambiar el estado dentro de él es enviar una acción sobre él.

Hay tres partes importantes de la tienda:

• createStore(): para crear un objeto de tienda en redux.
• dispatch(action): Para cambiar el estado de los datos de la tienda usando las acciones.
• getState(): para obtener el estado actual de la tienda en redux.

Vamos a crear una aplicación para demostrar cómo se define una tienda.

Creación de la aplicación React

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Paso 3: Instale los siguientes módulos. Desde el directorio raíz de su proyecto en la terminal, ejecute el siguiente comando:

npm install redux
npm install react-redux

Ejemplo: hagamos una aplicación de contador simple con la ayuda de redux para comprender la tienda.

En la carpeta src, cree dos nuevos componentes de carpeta y redux. En componentes agregue un archivo jsx llamado Counter.jsx. En la carpeta redux, cree una carpeta con el nombre de acciones y un archivo counterActions.jsx. Luego, en la carpeta redux, cree un reductor de nombre de carpeta y agregue un archivo llamado currencyReducer.jsx. Y luego, en la carpeta redux, agregue el archivo store.js.

Estructura del proyecto: Se verá así.

estructura de carpetas

Ejemplo: Anote el siguiente código en los archivos respectivos.

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

En el índice anterior, el archivo js con la ayuda del proveedor estamos accediendo a la tienda en todo el componente de nuestra aplicación.

import "./App.css";
import Counter from "./components/counter";
  
function App() {
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                height: "100vh",
            }}
        >
            <Counter />
        </div>
    );
}
  
export default App;

En la carpeta de componentes estos archivos son los siguientes:

import React from "react";
import { connect } from "react-redux";
import {
    incrementCount,
    decrementCount,
} from "../redux/actions/counterActions";
  
class Counter extends React.Component {
    render() {
        const { count, incrementCount, decrementCount } = this.props;
        return (
            <div>
                <button onClick={() => decrementCount()}>-</button>
                <span> {count} </span>
                <button onClick={() => incrementCount()}>+</button>
            </div>
        );
    }
}
  
const mapStateToProps = (state) => ({
    count: state,
});
  
const mapDispatchToProps = (dispatch) => ({
    decrementCount: () => dispatch(decrementCount()),
    incrementCount: () => dispatch(incrementCount()),
});
  
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

En la carpeta redux estos archivos de la siguiente manera:

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
  
const incrementCount = () => ({
    type: INCREMENT,
});
  
const decrementCount = () => {
    return {
        type: DECREMENT,
    };
};
  
export { INCREMENT, incrementCount, decrementCount, DECREMENT };

import { INCREMENT, DECREMENT } from "../actions/counterActions";
  
const currencyReducer = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        case DECREMENT:
            return state - 1;
        default:
            return state;
    }
};
  
export { currencyReducer };

import { createStore } from "redux";
import { currencyReducer } from "./reducers/currencyReducer";
  
const appStore = createStore(currencyReducer);
  
export default appStore;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Producción: 

Tienda en Redux