TypeScript

Component

出典: Typescript×ReduxでStateがundefinedに？確認すること！ — ソースコードを解説 / Component

Component (typescript)#cef49ac152ba

import React from "react";
import {IState} from "../Reducers/CounterReducer";
import {ActionDispather} from "./Container";
 
interface Props {
	value : IState;
	actions : ActionDispather
}
 
 
class Counter extends React.Component<Props, {}>{
 
	render() {
		return (
			<div>
				<p>CurrentCount:{this.props.value.num}</p>
				<button type={"button"} onClick={() => this.props.actions.Increment()}>Increment</button>
				<button type={"button"} onClick={() => this.props.actions.Decrement()}>Increment</button>
			</div>
		)
	}
}
 
export default Counter

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

▸ 実行結果は未収録です

id: #cef49ac152ba
lines: 24
extracted: 2026-06-10

Source収録記事

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

技術記事Gitデータ有React

Typescript×ReduxでStateがundefinedに？確認すること！

6年前12 min

同じ記事から

11 件

TypeScript

import {Action} from 'redux'

export enum	ActionNames{
	Increment = 'inc',

未収録

Action

#f6e047b97c21

TypeScript

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


export interface IState {

未収録

Reducer

#c6a3f4c3b4fc

TypeScript

import {combineReducers,createStore,Action} from 'redux'
import CounterReducer, {IState} from "../Reducers/CounterReducer";
import {ActionType} from "../Actions/CounterAction";

未収録

Store

#3016f3544502

TypeScript

import {ReduxAction, ReduxState} from "../Store/store";
import {DecrementAmount, IncrementAmount} from "../Actions/CounterAction";
import {connect} from "react-redux";
import {Dispatch} from "react";

未収録

Container

#adc8bd5d5619

TypeScript

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Provider} from "react-redux";

未収録

Index

#137a571c0501

TypeScript

	render() {
		return (
			<div>
				{/*<p>CurrentCount:{this.props.value.num}</p>*/}

▶ 実行可

Reduxでstateが undefinedに？どんな現象？

#724b87f56936

図鑑トップ