{"id":3096,"date":"2021-10-29T13:46:59","date_gmt":"2021-10-29T18:46:59","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=3096"},"modified":"2024-04-14T14:37:19","modified_gmt":"2024-04-14T20:37:19","slug":"usecontext-y-usereducer-replicar-redux","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/usecontext-y-usereducer-replicar-redux\/","title":{"rendered":"useContext and useReducer. How to replicate redux?"},"content":{"rendered":"

Estos dos React hooks se complementan a la hora de crear aplicaciones. Si tu aplicaci\u00f3n no es tan grande y compleja, estos dos react hooks te ayudaran a manejar el estado global de una forma muy similar a como lo hace Redux.<\/p>\n\n\n\n

Si no est\u00e1s familiarizado con Redux, te recomiendo revisar los principios usados en Redux<\/a>. Adem\u00e1s la combinaci\u00f3n de useContext<\/strong> and useReducer<\/strong> es un buen punto de partida para empezar a entender como funciona. <\/p>\n\n\n\n

Primero aprenderemos a utilizar useContext<\/strong>, luego useReducer<\/strong>, y finalmente uniremos estos dos React Hooks para replicar el comportamiento b\u00e1sico de Redux y controlar el estado global de una peque\u00f1a aplicaci\u00f3n.<\/p>\n\n\n\n

Contexto<\/h2>\n\n\n\n

La idea del contexto es que ah\u00ed guardes cierta informaci\u00f3n que necesitas en varios componentes. El problema a resolver es que esos componentes se encuentran en diferentes niveles del \u00e1rbol de nodos de tu aplicaci\u00f3n. Por esta raz\u00f3n, una instancia de un contexto contiene dos propiedades componentes, un Proveedor y un Consumidor (Provider<\/strong>, Consumer<\/strong>). Como consecuencia el proveedor almacena y suministra los datos, mientras el consumidor pide acceso a ellos.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
UnContexto <\/span>=<\/span> react<\/span>.<\/span>createContext<\/span>(<\/span>{}<\/span>)<\/span>;<\/span><\/span>\n\/\/ UnContexto = { Provider, Consumer }<\/span><\/span>\n....<\/span><\/span>\n<<\/span>UnContexto.Provider<\/span>><\/span><\/span>\n<<\/span>UnContexto.Consumer<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Agregando a useContext<\/code><\/strong>, existen tres formas de consumir<\/strong> el contexto actual de una aplicaci\u00f3n<\/p>\n\n\n\n
    \n
  1. static contextType = UnContexto<\/code><\/strong><\/li>\n\n\n\n
  2. <UnContexto.Consumer><\/code><\/strong><\/li>\n\n\n\n
  3. useContext(UnContexto)<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n
    Las tres maneras de obtener el contexto depende de que exista su correspondiente componente proveedor padre <UnContexto.Provider><\/strong><\/code>. De las tres, la forma m\u00e1s simple es useContext<\/code>(UnContexto)<\/strong>, punto a favor de los React Hooks.<\/p>\n\n\n\n
    A continuaci\u00f3n vamos a describir el ejemplo para la creaci\u00f3n del contexto, m\u00e1s tres ejemplos de los modos de consumirlo.<\/p>\n\n\n\n
    createContext(defaultContext)<\/h2>\n\n\n\n
    Primero necesitamos crear un contexto para poder consumirlo, la forma de crear el contexto no cambia para los consumidores.<\/p>\n\n\n\n
    Creamos un nuevo proyecto en codesandbox.io<\/a> y creamos un archivo llamado UserNameContext.js<\/code> con el siguiente contenido. En el ejemplo queremos obtener del nombre de un usuario en nuestra aplicaci\u00f3n, que se usa en distintos componentes.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> <\/span>{<\/span> <\/span>createContext<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>react<\/span>'<\/span>;<\/span><\/span>\nconst<\/span> UserNameContext <\/span>=<\/span> <\/span>createContext<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> UserNameContext<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Ahora en nuestro archivo App.js<\/code> importamos el contexto.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> UserNameContext <\/span>from<\/span> <\/span>'<\/span>.\/UserNameContext<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Necesitamos suministrar a la aplicaci\u00f3n con los datos de nuestro contexto, para eso ocupamos al componente <UserNameContext.Provider><\/strong><\/code> y actualizamos el valor del contexto cuando el usuario escribe en el campo de texto.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> <\/span>{<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>react<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> Header <\/span>from<\/span> <\/span>'<\/span>.\/components\/Header<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> UserNameContext <\/span>from<\/span> <\/span>'<\/span>.\/UserNameContext<\/span>'<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>userName<\/span>,<\/span> <\/span>setUserName<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>UserNameContext.Provider<\/span> <\/span>value<\/span>={<\/span>userName<\/span>}><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>static contextType<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>Header<\/span> \/><\/span><\/span>\n      <\/span><<\/span>input<\/span> <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span> <\/span>value<\/span>={<\/span>userName<\/span>} <\/span>onChange<\/span>={<\/span>and<\/span> <\/span>=><\/span> <\/span>setUserName<\/span>(e<\/span>.<\/span>target<\/span>.<\/span>value)<\/span>}\/><\/span><\/span>\n    <\/span><\/<\/span>UserNameContext.Provider<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nexport<\/span> <\/span>default<\/span> App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Para que quede claro la utilidad del contexto, creamos dos componentes, <Header><\/code> and <UserInfo><\/code><\/strong> dentro de la carpeta llamada components<\/strong>.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> UserInfo <\/span>from<\/span> <\/span>'<\/span>.\/UserInfo<\/span>'<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>Header<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>header<\/span>><\/span><\/span>\n      <\/span><<\/span>h2<\/span>><\/span>Header<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n      <\/span><<\/span>UserInfo<\/span> \/><\/span><\/span>\n    <\/span><\/<\/span>header<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    El componente <Header><\/code> es padre del componente <UserInfo><\/strong><\/code>, de esta manera se ejemplifica el consumo del contexto en un tercer nivel de componentes.<\/p>\n\n\n\n
    El componente de <UserInfo \/><\/strong><\/code> contendr\u00e1 al consumidor del contexto. As\u00ed que este es el \u00fanico componente que cambiara su implementaci\u00f3n para ejemplificar los tres modos de consumo del contexto. En las siguientes tres secciones se muestra cada forma.<\/p>\n\n\n\n
    static contextType = UnContexto<\/h2>\n\n\n\n
    Para usar esta forma de consumir el contexto, debemos crear un componente de clase. La importaci\u00f3n del contexto debe aplicarse tambi\u00e9n para los otros dos formas. Es algo que no cambia en las tres implementaciones.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> <\/span>{<\/span> <\/span>Component<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>react<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> UserNameContext <\/span>from<\/span> <\/span>'<\/span>..\/UserNameContext<\/span>'<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>class<\/span> <\/span>UserInfo<\/span> <\/span>extends<\/span> <\/span>Component<\/span> <\/span>{<\/span><\/span>\n  <\/span>static<\/span> <\/span>contextType<\/span> <\/span>=<\/span> UserNameContext<\/span>;<\/span><\/span>\n  <\/span>render<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>const<\/span> <\/span>value<\/span> <\/span>=<\/span> <\/span>this.<\/span>context<\/span>;<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n      <\/span><<\/span>p<\/span>>{<\/span>value<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n    )<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Simplemente se agrega una propiedad est\u00e1tica contextType<\/strong><\/code> a la clase, asign\u00e1ndole como valor el objeto contexto generado por createContext(initialContext)<\/strong><\/code> anteriormente.<\/p>\n\n\n\n
    Luego podemos usar this.context<\/strong><\/code> en cualquiera de los m\u00e9todos del ciclo de vida de un componente en React, para hacer referencia al valor actual del contexto y utilizarlo. Tal cual como se muestra en el ejemplo de arriba, donde utilizamos el m\u00e9todo render()<\/strong><\/code>.<\/p>\n\n\n\n
    <UnContexto.Consumer><\/h2>\n\n\n\n
    Esta manera de consumir el valor del contexto, pude usarse en un componente de clase o en un componente funcional, necesitamos importar el objeto del contexto y utilizar el componente Consumer<\/strong><\/code> que est\u00e1 definido como propiedad del objeto contexto.<\/p>\n\n\n\n
    Al  componente Consumer<\/code> mencionado en el p\u00e1rrafo anterior  le pasamos como children<\/code> una funci\u00f3n, la cual puede recibir como primer par\u00e1metro el valor actual del contexto. Por \u00faltimo en este ejemplo mostramos el valor del contexto en una etiqueta <p><\/code><\/strong>.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> UserNameContext <\/span>from<\/span> <\/span>'<\/span>..\/UserNameContext<\/span>'<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>UserInfo<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>UserNameContext.Consumer<\/span>><\/span><\/span>\n      <\/span>{<\/span>value<\/span> <\/span>=><\/span> (<\/span><<\/span>p<\/span>>{<\/span>value<\/span>}<\/<\/span>p<\/span>><\/span>)<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>UserNameContext.Consumer<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    useContext(UnContexto)<\/h2>\n\n\n\n
    Uno de los objetivos de esta publicaci\u00f3n es mostrar como usar el React Hook useContext(UnContexto)<\/strong><\/code>, este hook es el equivalente a la propiedad static contextTypes = UnContexto<\/strong><\/code> en un componente de clase o el uso del componente <UnContexto.Consumer><\/strong><\/code>, es decir, tambi\u00e9n puede obtener el valor actual del contexto y subscribirse a cambios del mismo.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> <\/span>{<\/span> <\/span>useContext<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>react<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> UserNameContext <\/span>from<\/span> <\/span>'<\/span>..\/UserNameContext<\/span>'<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>UserInfo<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>value<\/span>  <\/span>=<\/span> <\/span>useContext<\/span>(<\/span>UserNameContext<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>p<\/span>>{<\/span>value<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Igual que las dem\u00e1s formas, importamos el objeto contexto, luego dentro del componente funcional, invocamos a useContext<\/code><\/strong> pas\u00e1ndole como par\u00e1metro el propio contexto. As\u00ed obtenemos el valor actual del contexto y lo guardamos en la constante value<\/code>. Si el contexto cambia, esto provocara que el componente <UserInfo \/><\/code><\/strong> se vuelva a renderizar con el nuevo valor del contexto.<\/p>\n\n\n\n
    Compara la complejidad de obtener el contexto con useContext(UserNameContext)<\/code><\/strong>, static contextType = UserNameContext<\/code><\/strong> and <UserNameContext.Consumer><\/code><\/strong>. <\/p>\n\n\n\n
    Aqu\u00ed<\/a> puedes ver el ejemplo completo:<\/p>\n\n\n\n \"Edit <\/a>\n\n\n\n
    useReducer<\/h2>\n\n\n\n
    Este React Hook es bastante interesante como alternativa a useState<\/strong>, se recomienda usarlo cuando:<\/p>\n\n\n\n