TypeScript

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

出典: React×TypescriptでuseContext使ってReduxライクなState管理をしてみる — 実際useContextで上記で作ったものを使ってみる。

実際useContextで上記で作ったものを使ってみる。 (typescript)#eeb0f49121db

import React, {FC, useContext} from 'react';
import logo from './logo.svg';
import './App.css';
import {CounterContext, CounterContextProvider} from "./Contexts/CounterProvider";
import {Decrement, Increment, IncrementAction} from "./Reducers/CounterReducer";
 
function App() {
  return (
      <CounterContextProvider>
          <Counter/>
      </CounterContextProvider>
  );
}
 
const Counter : FC = () => {
  const context = useContext(CounterContext)
  return(
      <div>
        <h2>this is counter app.</h2>
        <p>{context.count}</p>
        <button onClick={() => context.dispatch(Increment())}>increment</button>
        <button onClick={() => context.dispatch(Decrement())}>decrement</button>
      </div>
 
  )
};
 
export default App;

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

▸ 実行結果は未収録です

id: #eeb0f49121db
lines: 28
extracted: 2026-06-10

Source収録記事

この snippet は記事の「実際useContextで上記で作ったものを使ってみる。」セクションに登場する。コードの前後の文脈・ハマりどころの解説は記事本文で。

技術記事

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

import React,{createContext, FC, useReducer} from "react";
import {CounterActions, CounterInitialState, CounterReducer} from "./CounterReducer";

type CounterContextState = {

未収録

createContextでContextとProviderを作る

#299994aedd3b

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

図鑑トップ