2016年04月17日

React+Redux+ES6でカウンター

React+ES6でカウンターのRedux使ったバージョン。ReactJS + Redux + ES6 のカウンターのサンプル - Qiitaをかなり参考にしているのでQiitaのほうを参考にしたほうが良いかと思います。

import React, { PropTypes } from 'react';
import {render} from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
//Conter Component
class Conter extends React.Component {
render () {
const {count} = this.props;
return (
<p>{count}</p>
)
}
}
//Countup Component
class Countup extends React.Component {
render () {
const {onClickPlus} = this.props;
return (
<button onClick={onClickPlus}>countup</button>
)
}
}
//App Component
class Component extends React.Component {
render () {
const { count, onClickPlus} = this.props;
return (
<div>
<Conter count={count}/>
<Countup onClickPlus={onClickPlus}/>
</div>
)
}
}
const App = connect(
//sate
function(state){
return {
count:state.count
}
},
//action
function(dispatch){
return {
onClickPlus: () => dispatch( {
type: 'ACTION_INCREMENT_COUNTER'
})
}
}
)(Component);
// Reducer
const store = createStore(function(state = {count: 0},action){
switch (action.type) {
case 'ACTION_INCREMENT_COUNTER':
return {count: ++state.count};
default:
return state;
}
});
//render
render(
<Provider store={store}>
<App/ >
</Provider>,
document.getElementById('app')
);
タグ:REACT Redux ES6
posted by ねこまんま at 18:11 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック