¿Cuál es el propósito de las constantes en Redux?

En Redux, tenemos muchas acciones y reductores definidos al crear una aplicación y administrar su estado desde el redux. Luego, las constantes entran en escena, proporciona una forma de definir el tipo de acciones y reductores en un archivo o en un lugar.

Las razones para considerar las constantes:

• El tipo de acciones y reductores se utilizan en dos archivos diferentes. Las constantes ayudan a importarlas y usarlas desde una sola página.
• La legibilidad del código aumenta porque todas las constantes se enumeran en un archivo y brindan información en una sola lectura.
• Ayuda a reducir los pequeños errores de escritura mientras se escribe.

Ejemplo de los contenidos:

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

Creemos una aplicación con react y redux para demostrar el propósito de las constantes:

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

Ahora, 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 el propósito de las constantes.

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

Estructura del proyecto: la estructura del proyecto se verá a continuación:

estructura de carpetas

A continuación se muestran los archivos que deben modificarse como se indica en nuestra aplicación:

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")
);

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;

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

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

Aquí hemos definido las dos constantes:

• INCREMENTO
• DECREMENTO

Estas dos constantes las estamos usando en las acciones como sus tipos.

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: después de configurar todos los archivos, desde la terminal ejecute el siguiente comando para iniciar la aplicación para ejecutar

npm start

Producción: 

Producción