TypeScript

counterReducerを作る

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

counterReducerを作る (typescript)#95f4059e973a

const IncrementAction = 'inc' as const;
export const Increment = () => ({type : IncrementAction});
 
const DecrementAction = 'dec' as const;
export const Decrement = () => ({type : DecrementAction});
 
export type CounterAction = ReturnType<typeof Increment> | ReturnType<typeof Decrement>
 
type CounterState = {
    count : number
}
 
export const CounterInitialState : CounterState = {
    count : 0
}
 
export const CounterReducer : React.Reducer<CounterState,CounterAction> = (state = CounterInitialState,actions) =>
{
    switch (actions.type) {
        case IncrementAction:
            return {count : state.count + 1}
        case DecrementAction:
            return {count : state.count - 1}
        default:
            return state
    }
};

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

▸ 実行結果は未収録です

id: #95f4059e973a
lines: 27
extracted: 2026-06-10

Source収録記事

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

技術記事

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

5年前6 min

同じ記事から

4 件

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

TypeScript

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

未収録

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

#eeb0f49121db

図鑑トップ