目的
Redux がどのようなものかかざっと把握するために１つのjsxファイルで動かしてみる。
ファイル構成
.
├── dest
│ └── app.js
├── index.html
├── package.json
└── src
└── app.jsx
package
pacage.json
{
"devDependencies": {
"babelify": "^6.1.3",
"browserify": "^10.2.6",
"watchify": "^3.6.0"
},
"scripts": {
"watch": "watchify -t babelify src/app.jsx -o dest/app.js -v"
},
"dependencies": {
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-redux": "^3.1.0",
"redux": "^3.0.4"
}
}
実行
$ npm install
$ npm run watch
code
src/app.jsx
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// Action
const ACTION_INCREMENT_COUNTER = {
type: 'ACTION_INCREMENT_COUNTER',
count: 1
};
const ACTION_DECREMENT_COUNTER = {
type: 'ACTION_DECREMENT_COUNTER',
count: -1
};
// Reducer
function counterReducer (state = {count: 0}, action) {
let count = state.count;
switch (action.type) {
case 'ACTION_INCREMENT_COUNTER':
return {count: count + action.count};
case 'ACTION_DECREMENT_COUNTER':
return {count: count + action.count};
default:
return state;
}
}
// Component
class CounterComponent extends React.Component {
render () {
const { count, onClickPlus, onClickMinus } = this.props;
return (
<div>
<p><span>Count: {count}</span></p>
<div>
<button onClick={onClickPlus}>+1</button>
<button onClick={onClickMinus}>-1</button>
</div>
</div>
);
}
}
CounterComponent.propTypes = {
count: PropTypes.number.isRequired,
onClickPlus: PropTypes.func.isRequired
};
// Containers
function mapStateToPropsContainer (state) {
return {
count: state.count
};
}
function mapDispatchToPropsContainer (dispatch) {
return {
onClickPlus: () => dispatch(ACTION_INCREMENT_COUNTER),
onClickMinus: () => dispatch(ACTION_DECREMENT_COUNTER)
};
}
let App = connect(
mapStateToPropsContainer,
mapDispatchToPropsContainer
)(CounterComponent);
// main
let store = createStore(counterReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app-container')
);
表示
$ python -m SimpleHTTPServer 8000
感想
- 以前ちょっと触った時の redux の examples では connect がデコレータ使われていたと思ったけど
export default connect(hoge..）の記述に変わってた。こっちの方がなんとなくやりやすい気がする。 - webpack 使わないと動かないかと思ってたけど、babelify でも動かせた。
- ちょっと触っただけだけど思ってたより Redux いい感じかもしれない。