TypeScript

createContextでContextとProviderを作る

出典: React×TypescriptでuseContext使ってReduxライクなState管理をしてみる — createContextでContextとProviderを作る

createContextでContextとProviderを作る (typescript)#299994aedd3b

import React,{createContext, FC, useReducer} from "react";
import {CounterActions, CounterInitialState, CounterReducer} from "./CounterReducer";
 
type CounterContextState = {
    count : number,
    dispatch : React.Dispatch<CounterActions>
}
 
export const CounterContext = createContext<CounterContextState>({} as CounterContextState);
 
export const CounterContextProvider : FC = ({children}) => {
    const [state,dispatch] = useReducer<typeof CounterReducer>(CounterReducer,CounterInitialState);
    return(
        <CounterContext.Provider value={{
            count : state.count,
            dispatch : dispatch
        }
        }>
            {children}
        </CounterContext.Provider>
    )
};

▸ この snippet は実行結果未収録

▸ 実行結果は未収録です

id: #299994aedd3b
lines: 22
extracted: 2026-06-10

Source収録記事

この snippet は記事の「createContextでContextとProviderを作る」セクションに登場する。コードの前後の文脈・ハマりどころの解説は記事本文で。

技術記事

React×TypescriptでuseContext使ってReduxライクなState管理をしてみる

5年前6 min

同じ記事から

4 件

TypeScript

const IncrementAction = 'inc' as const;
export const Increment = () => ({type : IncrementAction});

const DecrementAction = 'dec' as const;

未収録

counterReducerを作る

#95f4059e973a

TypeScript

type CounterContextState = {
    count : number,
    dispatch : React.Dispatch<CounterActions>
}

未収録

createContextでContextとProviderを作る

#bcf866e4af9f

TypeScript

export const CounterContextProvider : FC = ({children}) => {
    const [state,dispatch] = useReducer<typeof CounterReducer>(CounterReducer,CounterInitialState);
    return(
        <CounterContext.Provider value={{

未収録

createContextでContextとProviderを作る

#c5010fb65476

TypeScript

import React, {FC, useContext} from 'react';
import logo from './logo.svg';
import './App.css';
import {CounterContext, CounterContextProvider} from "./Contexts/CounterProvider";

未収録

実際useContextで上記で作ったものを使ってみる。

#eeb0f49121db

図鑑トップ