SQL

Action

出典: Typescript×Reduxでカウンタアプリ作ってみる！ — 各ソースコード / Action

import {Action} from 'redux'



export enum    ActionNames{

   Increment = 'inc',

   Decrement = 'dec'

}



export interface IIncrement extends Action{

   type : ActionNames.Increment

}



export interface IDecrement extends Action {

   type : ActionNames.Decrement;

}



// 名前は何でもいい。IncrementでもIncでも。なんでも。

// 戻り値は上で定義したInterfaceを返すようにする。

// いわばActionCreatorといわれるやつ。

export const IncrementAmount = () : IIncrement => ({type : ActionNames.Increment});

export const DecrementAmount = () : IDecrement => ({type : ActionNames.Decrement});



export type ActionType = IIncrement | IDecrement;

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

▸ 実行結果は未収録です

id: #471a1378c67a
lines: 22
extracted: 2026-06-10

Source収録記事

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

技術記事Gitデータ有React

Typescript×Reduxでカウンタアプリ作ってみる！

6年前9 min

同じ記事から

5 件

SQL

import {ActionNames, ActionType} from "../Actions/CounterAction";





export interface IState {

未収録

Reducer

#4d8b83057790

SQL

import {combineReducers,createStore,Action} from 'redux'

import CounterReducer, {IState} from "../Reducers/CounterReducer";

import {ActionType} from "../Actions/CounterAction";

未収録

Store

#c018959893e8

SQL

import {ReduxAction, ReduxState} from "../Store/store";

import {DecrementAmount, IncrementAmount} from "../Actions/CounterAction";

import {connect} from "react-redux";

import {Dispatch} from "react";

未収録

Container

#22309cd4a543

SQL

import React from "react";

import {IState} from "../Reducers/CounterReducer";

import {ActionDispather} from "./Container";

未収録

Component

#038f1a12561a

SQL

import React from 'react';

import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';

import {Provider} from "react-redux";

未収録

Index.tsx

#e82df7884099

図鑑トップ