31 lines
898 B
JavaScript
31 lines
898 B
JavaScript
import { useReducer, useContext, createContext } from 'react'
|
|
|
|
const CounterStateContext = createContext()
|
|
const CounterDispatchContext = createContext()
|
|
|
|
const reducer = (state, action) => {
|
|
switch (action.type) {
|
|
case 'INCREASE':
|
|
return state + 1
|
|
case 'DECREASE':
|
|
return state - 1
|
|
case 'INCREASE_BY':
|
|
return state + action.payload
|
|
default:
|
|
throw new Error(`Unknown action: ${action.type}`)
|
|
}
|
|
}
|
|
|
|
export const CounterProvider = ({ children }) => {
|
|
const [state, dispatch] = useReducer(reducer, 0)
|
|
return (
|
|
<CounterDispatchContext.Provider value={dispatch}>
|
|
<CounterStateContext.Provider value={state}>
|
|
{children}
|
|
</CounterStateContext.Provider>
|
|
</CounterDispatchContext.Provider>
|
|
)
|
|
}
|
|
|
|
export const useCount = () => useContext(CounterStateContext)
|
|
export const useDispatchCount = () => useContext(CounterDispatchContext)
|