Explicar los reductores en Redux

En este artículo, vamos a aprender sobre Reducer en Redux. Un reductor es una función pura que determina los cambios en el estado de una aplicación. Reducer es uno de los componentes básicos de Redux . 

Como hemos mencionado redux, antes de profundizar en los detalles de la función reductora, sepamos un poco sobre qué es Redux. Redux es una biblioteca de administració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.

Este fue el pequeño resumen sobre redux. Ahora, discutiremos la función reductora.

REDUCTOR: En redux, los reductores son las funciones puras que contienen la lógica y el cálculo que era necesario realizar en el estado. Estas funciones aceptan el estado inicial del estado que se está utilizando y el tipo de acción. Actualiza el estado y responde con el nuevo estado. Este estado actualizado se devuelve a los componentes de vista de la reacción para realizar los cambios necesarios. Básicamente, en resumen, podemos decir que el trabajo de Reducer es devolver el estado actualizado y también describir cómo cambia el estado.

Sintaxis: 

(State,action) => newState

Se trataba de la sintaxis del reductor y su definición. Ahora discutiremos el término función pura que hemos usado antes.

Función pura: se dice que una función es pura si el valor de retorno está determinado solo por sus valores de entrada y el valor de retorno es siempre el mismo para los mismos valores de entrada o argumentos. Una función pura no tiene efectos secundarios. A continuación se muestra un ejemplo de una función pura:

const multiply= (x, y) => x * y;
multiply(5,3);

En el ejemplo anterior, el valor de retorno de la función se basa en las entradas, si pasamos 5 y 3, siempre obtendríamos 15, siempre que el valor de las entradas sea el mismo, la salida no se verá afectada. 

Como sabemos, los Reductores son funciones puras, por lo que no pueden hacer las siguientes cosas:–. 

• No puede cambiar ni acceder a ninguna variable global.
• No puede realizar ninguna llamada a la API.
• No puede llamar a ninguna función impura como fecha o aleatoria

Entonces, aquí hay un ejemplo de una función reductora que toma el estado y la acción como parámetros.

const initialState = {};
const Reducer = (state = initialState, action) => {
   // Write your code here
}

Ahora, definamos los parámetros de la función del reductor, es decir, estado y acción.

Estado: La función reductora contiene dos parámetros, uno de ellos es el estado. El estado es un objeto que contiene cierta información que puede cambiar durante la vida útil del componente. Si el estado del objeto cambia, el componente debe volver a renderizarse. En redux, la actualización de estado ocurre en la función reductora. Básicamente, la función reductora devuelve un nuevo estado al realizar una acción en el estado inicial. A continuación, se muestra un ejemplo de cómo podemos declarar el estado inicial de una aplicación.

const INITIAL_STATE = {
    userID: '',
    name: '',
    courses: []
}

Acciones: El segundo parámetro de la función reductora son las acciones. Las acciones son objetos de JavaScript que contienen información. Las acciones son la única fuente de información para la tienda. El objeto Acciones debe incluir la propiedad de tipo y también puede contener la carga útil (campo de datos en las acciones) para describir la acción. Por ejemplo, una aplicación educativa podría tener esta acción:

{
   type: 'CHANGE_USERNAME',
username: 'GEEKSFORGEEKS'
}
{
   type: 'ADD_COURSE',
payload: ['Java with geeksforgeeks', 
         'Web Development with GFG']
}

Ahora que conocemos el estado y la acción, veamos cómo podemos crear una función reductora y actualizar el estado de la aplicación. 

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: una vez que cree la carpeta con el nombre de carpeta apropiado, MyApp, y continúe con 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:

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" }
}

• Ruta de archivo: src/reducers/func.js

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;

• Ruta de archivo:  src/reductor/index.js

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;

• Ruta de archivo: src/index.js

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: Abra la terminal y escriba el siguiente comando.

npm start

Producción: