Sé cómo usar la API de contexto, pero estoy tratando de usarla de otra manera que se parezca mucho a cómo funciona Redux para poder mejorar con Redux cuando intente aprenderlo. Mi objetivo para este caso simple es escribir cosas en el campo de entrada y hacer que se muestren en la pantalla, si hace clic en el botón, una ventana de alerta mostrará lo que escribió. Si hace clic en texto claro, el campo de entrada estará en blanco. Quiero poder hacer esto sin tener que recurrir a la administración del estado local como useState, sino enviar los métodos que creé en mi archivo de reductores y obtener el valor del estado. No puedo hacer esa segunda parte, parece que estoy despachando correctamente, pero cuando trato de representar el 'texto', solo representa el estado inicial y no sé cómo actualizarlo, o incluso borrar el texto. Aquí está el enlace a mi sandbox: https://codesandbox.io/s/create-context-api-redux-style-odv01?file=/src/Button.js
No reescribiré todo su código, pero puedo señalar dónde está su problema para que pueda continuar trabajando en él. Su problema es con el proveedor de contexto que ha creado, que nunca actualizará el estado. El proveedor de contexto es responsable de distribuir el estado directamente a los componentes secundarios en todo el árbol, pero aún debe mantener ese estado; en su caso, no definió ningún estado para él.
import React, { createContext, useContext, useReducer } from "react"; export const StateContext = createContext({ // put your initial state here }); // then this will now have initial state and updated state export const useStateValue = () => useContext(StateContext); export const StateProvider = ({ reducer, initialState, children }) => ( // now you can declare state like this const [example1, setExample1] = useState(example1) const [example2, setExample2] = useState(example2) // this is where you'll define your dispatch function // and use it like this const value = { example, setExample, example2, setExample2 // or you can add a custom dispatch here } <StateContext.Provider value={value}> {children} </StateContext.Provider> // or you can do const [example, setExample] = useState(useStateValue()) <StateContext.Provider value={{example, setExample}> {children} </StateContext.Provider> ); Este código no es perfecto, es solo para darle una idea de lo que debería estar haciendo. Ahora, cuando importe useStateValue en algún lugar, puede elegir cómo destruirlo y qué estado/funciones desea importar, es decir, enviar.