jueves 18 julio 2024

Cómo utilizar redux en react

Introducción a Redux
Instalación
Configuración de Redux
Conexión de Componentes a Redux
Creación de Acciones
Conclusión

Introducción a Redux

Redux se basa en tres principios clave:

1. Single Source of Truth (Fuente Única de Verdad): El estado de toda tu aplicación se almacena en un único objeto de estado, lo que facilita la depuración y el seguimiento del estado.

2. State is Read-Only (El Estado es Solo de Lectura): La única forma de cambiar el estado es emitiendo una acción, un objeto que describe lo que sucedió.

3. Changes are Made with Pure Functions (Los Cambios se Hacen con Funciones Puras): Para especificar cómo cambia el estado en respuesta a una acción, se utilizan funciones puras llamadas reducers.

Instalación

Primero, debes instalar redux y react-redux en tu proyecto React:

npm install redux react-redux

Configuración de Redux

Creación del Store

El store es el objeto que mantiene el estado de la aplicación. Vamos a crear un archivo store.js para configurarlo:

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Creación de Reducers

Los reducers especifican cómo cambia el estado en respuesta a una acción. Vamos a crear un reducer simple en un archivo llamado reducers.js:

// reducers.js
const initialState = {
  count: 0,
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default counterReducer;

Proveer el Store a la Aplicación

Para que los componentes de React puedan acceder al store, debes envolver tu aplicación en el componente Provider de react-redux. Modifica tu archivo index.js de la siguiente manera:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Conexión de Componentes a Redux

Uso del Hook `useSelector`

El hook useSelector permite seleccionar partes del estado del store. Vamos a crear un componente que muestre el valor del contador:

// Counter.js
import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const count = useSelector(state => state.count);
  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

export default Counter;

Uso del Hook `useDispatch`

El hook useDispatch permite enviar acciones al store. Vamos a extender nuestro componente Counter para incluir botones que incrementen y decrementen el contador:

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Agregar el Componente al App

Finalmente, agrega el componente Counter a tu aplicación:

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};

export default App;

Creación de Acciones

Para mejorar la claridad y la escalabilidad de tu aplicación, puedes definir acciones en un archivo separado:

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

Luego, actualiza el componente Counter para usar estas acciones:

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

Conclusión

Redux ofrece una manera estructurada y predecible de manejar el estado en aplicaciones React, especialmente cuando se trata de aplicaciones grandes y complejas. Con la configuración adecuada y el uso de useSelector y useDispatch, puedes gestionar el estado de manera efectiva y mantener tu aplicación organizada y fácil de mantener.

Etiquetas:

react redux javascript desarrollo web

Creado por:

Jorge García

Fullstack developer