Categorías
Temporada 0

Log 0.3

Objetivos:

  • Traslado de Hooks a Redux
  • Interfaz

Migrando un proyecto a Redux

Pese a que no creo que utilice en mis proyectos la solución de Redux, el curso me ha venido bien para entender su concepto.

Uno de los problemas que puede presentar trabajar con Hooks en React es que la información suele viajar en un único sentido: de los componentes padre a los componentes hijo.

Existen alternativas para resolver esta unidireccionalidad, pero originalmente este mecanismo no estaba pensado para ir en otra dirección.

Así, cuando queremos emplear un valor en distintas partes de nuestra aplicación de forma generalizada, trabajar con Hooks puede resultar engorroso.

Redux es, simplificándolo, un gestor de variables globales que puede accederse desde cualquier punto de tu aplicación.

La forma de acceder a lo que se conoce por Store se hace en dos fases: Primero definimos la store en el nivel más alto de nuestra aplicación:

//..
import store from './store'
import { Provider } from 'react-redux'

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

De esta forma, la store está disponible en toda nuestra aplicación, siendo tan sencillo acceder a ella como:

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

const users = useSelector(state => state.persons)
const dispatch = useDispatch()

En el primer caso, useSelector nos extrae la información de la store (en este caso el objeto ‘persons’).

En el segundo, creamos una variable dispatch que va a ser la encargada de lanzar los que son conocidos como «reducers», funciones que permiten acceder al contenido de la store para modificarlo:

import userService from '../services/users.js'


const personsReducer = (state = [], action) => {
  switch(action.type){
    case 'SET_PERSONS': {
      return action.data
    }
    default:
      return state
  }

}


export const setPersons = () => {
  return async dispatch => {
    const persons = await userService.getAll()
    dispatch({
      type: 'SET_PERSONS',
      data: persons
    })
  }
}

export default personsReducer

Este es un ejemplo básico de reducer, en el que ya incluimos el método para acceder a él y lo exportamos directamente. De esta forma podemos usar dispatch llamando directamente al método del reducer y dejar que éste se encargue de toda la lógica: tanto la de la store de redux como la de la base de datos.

La migración ha sido sencilla en general, aunque tienes que cambiar un poco la perspectiva cuando pasas de Hooks a Redux porque ni funcionan igual ni se usan para lo mismo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *