質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

3012閲覧

react+reduxで作られたカウンターのアプリを+typescriptで作り直す。

namita0517

総合スコア10

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/08/08 09:26

編集2022/01/12 10:55

###前提・実現したいこと

http://qiita.com/pentamania/items/859fe5f2f7e9cf12d6ca
こちらのサイトのアプリケーションをtypescriptで作り直しています。

現在は、onclickイベントが発火せず、e.props.handleClick()の関数がないとエラーが出ています。
センテンスや構文のエラーはありません。

おそらくcomponent/app.tsx、もしくはcontainers/app.tsxが間違っているような気がするのですが。
ご回答をお願いしたいです。

#actions/app.tsx

typescript

1'use strict'; 2import * as types from '../constants/ActionTypes' 3/* 4* APIを叩くなどの動作はここに書く、reducerに渡す処理 5*/ 6 7//import AppActions from '../actions/app'で呼び出し 8export function increment() { 9 return { type: types.INCREMENT } 10} 11

#components/app/tsx

typescript

1'use strict'; 2/* メインコンポーネント */ 3import * as React from 'react' 4 5// 注:JSX構文内のvalueは{}で囲う 6// 注:返せるのは一つの要素のみなのでdivで全体を囲う事 7export default class App extends React.Component<any, any> { 8 render() { 9 return ( 10 <div> 11 <span>{this.props.fuga}</span><br/> 12 <button onClick={ () => this.props.handleClick() }>*増加*</button> 13 </div> 14 ); 15 } 16} 17

#constants/ActionType.tsx

typescript

1export const INCREMENT = 'INCREMENT'

#containers/app.tsx

typescript

1import * as React from 'react' 2import { bindActionCreators } from 'redux' 3import { connect } from 'react-redux' 4import App from '../components/app' 5import * as AppActions from '../actions/app' 6 7// stateから必要なプロパティ変換? 8function mapStateToProps(state) { 9 return state 10} 11 12/* 13* dispatch関数(ユーザーアクション)を受けてプロパティ変換 14* 要するにthis.props.handleClickでアクセス可能になる 15* actionファイルに書かれた処理をまとめてbindActionCreators()で変換すると楽できる 16*/ 17function mapDispatchToProps(dispatch) { 18 return { 19 // handleClick: () => { dispatch(AppActions.increment()) } 20 // actions: this.props.handleClick(AppActions, dispatch) 21 actions: bindActionCreators(AppActions, dispatch) 22 } 23} 24 25 26//connectでReduxとReactのコンポーネントを繋ぐ 27export default connect( 28 mapStateToProps, 29 mapDispatchToProps 30)(App) 31

#reducers/index.tsx

typescript

1'use strict'; 2// 初期ステート設定 3const initialState = { 4 fuga: 0 5} 6 7export default function reducer(state = initialState, action) { 8 switch(action.type) { 9 case 'INCREMENT': { 10 return { fuga: state.fuga + 1 } 11 } 12 default: 13 return state 14 } 15}

#index.tsx ルートファイル

typescript

1import * as React from 'react' 2import * as ReactDOM from 'react-dom' 3// import {render} from 'react-dom'; // メンバだけ引っこ抜くとReactDOM.render()と書かなくて良い 4import { Provider } from 'react-redux'; 5import configureStore from './store/configureStore'; 6import App from './containers/app'; //メインコンポーネント 7 8const store = configureStore(); // ストア呼び出し 9const rootEl = document.getElementById('root') // 流しこむ対象の要素 10 11ReactDOM.render( 12 <Provider store={store}> 13 <App /> 14 </Provider>, 15 rootEl 16); 17

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

手前味噌で申し訳ないですが私の記事です。
React+TypeScript+jQueryの共存(3)

気になるのは
・constructorがない
・thisをbindしていない(reduxでやってる?)
・handleClick()はどこにいる?

投稿2016/08/08 09:34

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問