import React, {
createContext,
useContext,
useReducer
}
from
'react'
;
const CounterContext = createContext();
const reducer = (state, action) => {
switch
(action.type) {
case
'increment'
:
return
{ count: state.count + 1 };
case
'decrement'
:
return
{ count: state.count - 1 };
default
:
return
state;
}
};
function
CounterProvider({ children }) {
const [state, dispatch] = useReducer(reducer,
{ count: 0 });
console.log(
'Counter state:'
, state);
return
(
<CounterContext.Provider value={{
state,
dispatch
}}>
{children}
</CounterContext.Provider>
);
}
function
useCounter() {
const context = useContext(CounterContext);
if
(!context) {
throw
new
Error(`useCounter must be used
within a CounterProvider`);
}
return
context;
}
function
Counter() {
const { state, dispatch } = useCounter();
return
(
<div>
<h2>Counter: {state.count}</h2>
<button onClick={
() => dispatch({
type:
'increment'
})
}>
Increment
</button>
<button onClick={
() => dispatch({
type:
'decrement'
})
}>
Decrement
</button>
</div>
);
}
function
App() {
return
(
<CounterProvider>
<Counter />
</CounterProvider>
);
}
export
default
App;