Explicar las acciones en Redux

En este artículo, vamos a aprender sobre la acción en Redux . Las acciones son objetos simples de JavaScript que contienen información. La acción es uno de los componentes básicos de 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 el objeto Acción.

Acción: Las acciones son objetos de JavaScript que contienen información. Las acciones son la única fuente de información para la tienda. Básicamente lleva una carga útil de información desde la aplicación a la tienda. Sólo nos dice lo que ha sucedido. Las acciones tienen una propiedad de tipo que deben incluir, ya que la propiedad de tipo indica qué tipo de acción realizar. La acción también puede contener la carga útil (campo de datos en la acción) para describir la acción.

Sintaxis:

const Actions = {
 type: '',
 payload: ''
}

En la sintaxis, el objeto Acción tiene dos propiedades. La primera propiedad es «propiedad de tipo», debe definirse en la restricción de string y es obligatorio incluir la propiedad de tipo en el objeto. El segundo es «carga útil», la carga útil almacena la información adicional sobre lo que sucedió. No es una obligación incluir «carga útil» en el objeto. Depende totalmente de usted, pero siempre debemos tratar de pasar solo la información necesaria al objeto de acción y tratar de mantenerlo lo más ligero posible. 

Como se dijo anteriormente, la acción es la única fuente de información para la tienda. Ahora, hablaremos de la tienda.

Tienda: La tienda es el objeto que contiene el estado de la aplicación. Mira, contiene el estado de los componentes que deben pasarse a otros componentes. La tienda hace que esta transmisión sea mucho más fácil, ya que ya no necesitamos mantener un estado dentro de un componente principal para pasar lo mismo a sus componentes secundarios.

Funciones asociadas a Tienda:  

createStore(): este método se utiliza para crear una tienda. A continuación se muestra la sintaxis para ello.

const store = createStore()

dispatch(action): Para cambiar el estado, necesitamos llamar a store.dispatch() y pasar un objeto de acción. A continuación se muestra la sintaxis para ello.

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

getState(): este método es para obtener el estado actual de la tienda. 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 llamaremos al método getState() para recuperar el valor actualizado de la aplicación.

Creadores de acciones

Los creadores de acciones son la función que crea acciones. Entonces, las acciones son la información (Objetos) y el creador de acciones son funciones que devuelven estas acciones. Estas funciones ayudan a lograr la reutilización. Por ejemplo, una lista de tareas pendientes tendrá este creador de acciones.

// Creating Action creator
function AddToDo(task) {
  return { type: 'ADD_TASK', task: task }
}
  
// Dispatching 
store.dispatch(AddToDo('anything'));

Pero, ¿qué pasa si tenemos múltiples creadores de acciones? ¿Cómo uniremos múltiples creadores de acciones para almacenar? Para eso redux tiene el método bindActionCreators(). Esta es una función de utilidad que toma un creador de acciones o un objeto completo de creadores de acciones y los vincula a todos a la función de envío que obtuvimos de una tienda. Por ejemplo, una lista de tareas tendrá varios creadores de acciones.

const boundToDoActions = bindActionCreators(
  {
    add: AddToDo,
    remove:RemoveToDo,
    clear:ClearToDos
  },
  store.dispatch
)

Creación de la aplicación React y la instalación del módulo:

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

npx create-react-app MyApp

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

cd MyApp

Paso 3: Una vez que haya terminado de crear la aplicación ReactJS, instale redux y react-redux usando el siguiente comando:

npm install redux react-redux

Estructura del proyecto: Tendrá el siguiente aspecto:

GFG

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.

Nombre de archivo: App.js

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;

Nombre de archivo: index.js

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

Nombre 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;
      }
      return state - 2;
    default:
      return state;
  }
};
  
export default change;

Nombre de archivo: src/reductor/index.js

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

Nombre de archivo: Store.js

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

Nombre de archivo: src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import App from './App.jsx';
import store from './store';
  
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:

Referencia: https://www.geeksforgeeks.org/introduction-to-react-redux/