Redux es fácil si usas los hooks

¿Te parece confuso o complicado usar mapStateToProps y mapDispatchToProps cuando estás implementando Redux? Prepárate, que hoy te voy a enseñar cómo hacerlo más fácil usando los hooks.

Iniciemos un proyecto

En este tutorial vamos a crear un contador de clics para explicar dos hooks que tenemos disponibles en react-redux desde la versión 7.1.0.

Lo primero que debemos hacer es crear un proyecto de React, para esto ejecutaremos en nuestra terminal create-react-app counter. Una vez que haya terminado la creación de nuestro proyecto, desde nuestra terminal entraremos al proyecto usando cd counter para instalar Redux y react-redux con el siguiente comando npm i redux react-redux.

Qué es memoization

Comencemos a crear nuestro contador

Abramos el proyecto con nuestro editor de texto favorito, el mío es Visual Studio Code, nos dirigimos hacia el archivo index.js ubicado en la carpeta src. Una vez que fue abierto, debemos crear un estado inicial para nuestra aplicación, el cual contendrá una propiedad llamada count, que será el valor de nuestro contador de clics.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from'./App'

const initialState = {
  count: 0
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

Hagamos la conocida configuración de Redux

Dentro de la carpeta src vamos a crear otra carpeta que llamaremos redux y esta contendrá tres archivos que nos servirán para separar las responsabilidades al manejar nuestro estado. Los archivos que crearemos son:

• actions.js
• reducer.js
• types.js

Primero escribamos nuestros tipos de acciones en el archivo types.js, estos nos ayudarán a estandarizar y a evitar errores cuando ejecutemos alguna acción sobre nuestro estado. Agreguemos dos tipos de acciones, una para aumentar el contador y otra para disminuirlo.

// types.js
export const ADD = 'ADD_COUNTER'
export const DECREASE = 'DECREASE_COUNTER'

Ahora declaremos nuestras acciones, estas funciones ubicadas en actions.js son las que le indicarán a nuestro reducer qué es lo que debe realizar sobre el estado de nuestra aplicación.

// actions.js
// Primero debemos importar los tipos de acciones que creamos
import { ADD, DECREASE } from './types'

export const addCounter = payload => ({
  type: ADD,
  payload
})

export const decreaseCounter = payload => ({
  type: DECREASE,
  payload
})

Siguiente paso, crear nuestro reducer en reducer.js. Este es el encargado de hacer las modificaciones sobre el estado de nuestra aplicación, aquí es donde irá toda la lógica que necesitemos para cambiar cualquier propiedad del estado global.

// reducer.js
// Aquí también debemos importar los tipos de acciones para usarlas en el switch
import { ADD, DECREASE } from'./types'

export const reducer = (state, action) => {
  switch(action.type) {
    case ADD:
      return {
        count: state.count + 1
      }    
    case DECREASE:
      return {
        count: state.count - 1
      }
    default:
      return state
  }
}

Una vez listos nuestros archivos, debemos integrarlos a nuestra aplicación, por lo que navegaremos hacia el archivo index.js para crear nuestro store y por medio de un Provider ponerlo disponible en todo nuestro árbol de elementos.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
// Importamos desde redux la función para crear nuestro store
import { createStore } from 'redux'
// El Provider lo traeremos desde react-redux
import { Provider } from 'react-redux'
// También debemos traer nuestro reducer que acabamos de crear
import { reducer } from './redux/reducer'

const initialState = {
  count: 0
}

// La función de createStore primero debe recibir nuestro reducer y después el estado inicial
const store = createStore(
  reducer,
  initialState
)

// Encerramos nuestra aplicación en el Provider y a este le pasamos el store
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    <Provider>
  <React.StrictMode>,
  document.getElementById('root')
)

Llegó el momento de lo interesante

Si ya conoces y sabes usar Redux podrás recordar que en este punto es donde todo se torna difícil de entender. Con los hooks esto no pasa, me atrevo a decir que se vuelve la parte más fácil.

Ahora hay que movernos hacia nuestro archivo App.js y veamos qué rápido es comenzar a darle vida a nuestro contador de clics. Lo primero que debemos hacer es crear el siguiente marcado para nuestro contador, tendremos una línea para mostrar el valor del contador y botones para aumentarlo o disminuirlo.

import React from'react'
import './App.css'

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <h3>Counter with Redux Hooks</h3>
        <button>ADD +1</button>
        <button>DECREASE -1</button>
      </header>
    </div>
  )
}

export default App

Debemos importar nuestras acciones declaradas en actions.js y los dos hooks que harán la magia, que son:

• useSelector: Se encarga de devolvernos la propiedad del estado a la que nosotros queramos acceder.
• useDispatch: Se encarga de decirle al reducer qué acción queremos ejecutar.

import { useSelector, useDispatch } from 'react-redux'
import { addCounter, decreaseCounter } from './redux/actions'

¡Usemos los hooks! 🥳

Lo primero que haremos es traer nuestra propiedad count del estado y la guardaremos en una variable:

const count = useSelector(state => state.count)

useSelector es una función de alto orden que como primer parámetro recibe otra función y esta recibe nuestro estado, para que posteriormente nosotros le indiquemos qué propiedad nos debe devolver.

Si no sabes qué es una función de alto orden (Higher Order Function) te recomiendo tomar el Curso de Programación Funcional en JavaScript por Bedu

Luego de esto, debemos crear nuestro dispatcher usando el hook useDispatch y nuestras funciones que se ejecutarán según el botón al que le hagamos clic:

// Creamos un dispatcher ejecutando el hook de useDispatch
const dispatcher = useDispatch()

// El dispatcher debemos ejecutarlo y en su interior pasaremos como parámetro la información de la acción a ejecutar por el reducer
const add = () => dispatcher(addCounter())
const decrease = () => dispatcher(decreaseCounter())

Ahora, incluimos todo esto en nuestro marcado, agregando los escuchadores de eventos y renderizando el valor de count, por lo que nuestro archivo App.js debe quedar así:

import React from 'react'
import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { addCounter, decreaseCounter } from './redux/actions'

function App() {
  const count = useSelector(state => state.count)
  const dispatcher = useDispatch()

  const add = () => dispatcher(addCounter())
  const decrease = () => dispatcher(decreaseCounter())

  return (
    <div className="App">
      <header className="App-header">
        <h3>Counter with Redux Hooks {count}</h3>
        <button onClick={add}>ADD +1</button>
        <button onClick={decrease}>DECREASE -1</button>
      </header>
    </div>
  )
}

export default App

Se acerca el momento de la verdad

Ya sólo nos queda ejecutar nuestra aplicación y comprobar que todo esté funcionando correctamente. Así que, abrimos a nuestra terminal, ejecutamos npm start, esperamos a que compile y al terminar se abrirá nuestro navegador, donde podremos ver y usar nuestro contador que está funcionando perfectamente con los hooks de Redux.

Conclusión

Los hooks de Redux nos ayudan a manejar el estado global de nuestra aplicación de una forma muy sencilla, pero, es recomendable que comprendamos el uso de mapStateToProps y mapDispatchToProps.

Si ya tomaste el Curso de React Router y Redux te recomiendo tomar el Curso de Redux por Bedu, donde profundizarás más en esta tecnología.

#NuncaParesDeAprender 💚