Intenté este patrón de incluir la funcionalidad de despacho en mi función reductora, pero obtuve este NaN, independientemente de lo que intente aumentar o disminuir, ¿qué es lo que me falta? Básicamente, crear un método auxiliar en mi función reductora para un mejor enfoque de API podría no ser el mejor enfoque, pero al menos probé las cosas de manera diferente, ¿cuál es el problema que me falta para que esto funcione? [perdone mi inglés]

 import * as React from 'react'; const CounterContext = React.createContext(); function CounterProvider({ step = 1, initialCount = 0, ...props }) { const [state, dispatch] = React.useReducer( (state, action) => { const change = action.step ?? step switch (action.type) { case 'increment': { return { ...state, count: state.count + change } } case 'decrement': { return { ...state, count: state.count - change } } default: { throw new Error(`Unhandled action type:${action.type}`) } } }, { initialCount: initialCount }) const increment = React.useCallback(() => dispatch({ type: 'increment' }), [ dispatch ]) const decrement = React.useCallback(() => dispatch({ type: 'decrement' }), [ dispatch ]) const value = { increment, decrement, state } return <CounterContext.Provider value={value} {...props} /> } function useCounter() { const context = React.useContext(CounterContext) if (context === undefined) { throw new Error('useCounter must be used within CounterProvider') } return context } function Counter() { const { state, increment, decrement } = useCounter(); console.log(state, 'inc ', increment, 'dec ', decrement) return ( <div> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> <div>Current Count: {state.count}</div> </div> ) } function App() { return ( <CounterProvider> <Counter /> </CounterProvider> ) } export default App