Clase 31 - React - Context, Reducer y Store

#react #store #reducer #context #hooks

State Management

useContext

• Permite suscribirse a un Contexto previamente generado desde un componente.
• Trabaja en conjunto con un Provider.
• Poseen un valor de fallback por defecto.

import { useContext, createContext } from 'react'

const MyContext = createContext(null)

function Component () {
  const context = useContext(MyContext)

  return <div>{context}</div>
}

useReducer

• Permite añadir un reducer a nuestro componente.
• Permite manejar estados al igual que un useState pero los maneja mediante el dispatch y reducer.
• Su uso es ligeramente más complejo que un useState, pero permite manejar varias acciones sobre un mismo estado.

import { useReducer } from 'react'

const reducer = (state, action) => {/* ... */}

function Component() {
  const [state, dispatch] = useReducer(reducer, initialState)

  const handleClick = () => {
    dispatch({ type: 'new_action' })
  }

  return <div onClick={handleClick}>{state.data}</div>
}

State Manager: Zustand

• Biblioteca que facilita tener un estado global en nuestra aplicación.
• No posee boilerplate como otros state manager lo que facilita su implementación y uso.
• Utiliza el formato de Hooks para su funcionamiento en lugar de Actions y Reducers.

import { create } from 'zustand'

const useStore = create((set, get) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
  incSquareValue: () => get().count ** 2
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Ejemplo

• Código visto en clase

Ejercicios

• Utilizar useContext para manejar la funcionalidad de Dark Mode en una App de React.
• Utilizar Zustand para consumir una API del tema a elección y mostrar en la app el resultado de la llamada de la API.