Y
import React, { useReducer, useCallback, useMemo, useContext } from "react";
import produce from "immer";
export const AppStateContext = React.createContext(null);
const initialState = { user: { firstName: "Some", lastName: "Person" } };
function reducer(draft, action) {
switch (action.type) {
case "setFirstName":
draft.user.firstName = action.first;
return;
case "setlLastName":
draft.user.lastName = action.last;
return;
default:
I
i
export function AppStateProvider({ children }) {
const cachedReducer = useCallback(produce(reducer), [reducer]); // copied from useImmerReducer
const [state, dispatch] = useReducer(cachedReducer, initialState);
const cachedActions = useMemo(() => {
return {
setFirstName: first => dispatch({ type: "setFirstName", first }),
setlLastName: last => dispatch({ type: "setLastName", last })
i
}, [dispatch]);
return (
<AppStateContext.Provider value={[state, cachedActions]}>
RCRA N [Ty
</AppStateContext.Provider>
)4
I
export function useAppState() {
return useContext(AppStateContext);
I