Help us understand the problem. What is going on with this article?

[TypeScript/React Hooks] useReducer + useContextで死ぬほど簡単にグローバルなストアを作る

import React, {
    createContext,
    FC,
    useContext,
    useEffect,
    useReducer,
} from 'react'

type NewStateAction = Partial<S> | ((prevState: S) => Partial<S>)
type ContextValue = {
    globalState: S
    setGlobalState: (newState: NewStateAction) => void
}

type S = typeof initialState

const initialState = {
    count: 0,
}

export const Store = createContext({} as ContextValue)

export const Provider: FC<{}> = ({ children }) => {
    const [globalState, setGlobalState] = useReducer(
        (prev: S, newState: NewStateAction) => {
            const _newState =
                typeof newState === 'function' ? newState(prev) : newState
            return { ...prev, ..._newState }
        },
        initialState,
    )

    useEffect(() => {
        // count が変更された場合の処理
    }, [globalState.count])

    return (
        <Store.Provider value={{ globalState, setGlobalState }}>
            {children}
        </Store.Provider>
    )
}

おわり。勢いで書いたのでどっか間違ってるかもしれません。

コンポーネントでは以下のように使います。

const Component = props => {
    const { globalState, setGlobalState } = useContext(Store)

    globalState.count // get

    setGlobalState({ count: 1 }) // set
    setGlobalState(({ count }) => ({ count: count + 1 })) // set
}

const App = () => (
    <Provider>
        <Component></Component>
    </Provider>
)

useEffect など通常の React Hooks の API が使えるので統一感があっていいですね!!

yarnaimo
Webサービスの開発などを行っています。 TypeScript / Firebase / React / Next.js / Node.js / UI Design
https://yarnaimo.vercel.app
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away