###前提・実現したいこと
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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。