/
githubmirror
/
next.js
Обзор
Документация
Войти
/
githubmirror
/
next.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
canary
examples/with-context-api/_components/Counter.tsx
59 строк
1 KB
PapatMayuri
updated with-context-api example to utilize the App Router. (#73316)
02 дек 2024, 04:40
Не верифицирован
02 дек 2024, 04:40
945086a
Код
Авторство
О чём код?
"use client"; import { useReducer, useContext, createContext, ReactNode, Dispatch, } from "react"; type CounterState = number; type CounterAction = | { type: "INCREASE" | "DECREASE"; } | { type: "INCREASE_BY"; payload: number; }; const CounterStateContext = createContext<CounterState>(0); const CounterDispatchContext = createContext<Dispatch<CounterAction>>( () => null, ); const reducer = (state: CounterState, action: CounterAction) => { 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: ${JSON.stringify(action)}`); } }; type CounterProviderProps = { children: ReactNode; initialValue?: number; }; export const CounterProvider = ({ children, initialValue = 0, }: CounterProviderProps) => { const [state, dispatch] = useReducer(reducer, initialValue); return ( <CounterDispatchContext.Provider value={dispatch}> <CounterStateContext.Provider value={state}> {children} </CounterStateContext.Provider> </CounterDispatchContext.Provider> ); }; export const useCount = () => useContext(CounterStateContext); export const useDispatchCount = () => useContext(CounterDispatchContext);