ReactJS+Redux+ES6 카운터의 샘플
12995 단어 ReactJavaScriptflux
의 목적
레드ux가 어떤 것인지 대충 파악하기 위해 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
감상
export default connect(hoge..)
의 기술이 되었다.아무래도 이쪽이 쉬울 것 같아서요.참고 자료
Reference
이 문제에 관하여(ReactJS+Redux+ES6 카운터의 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/cortyuming/items/bd82886ae2ec381e6edd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)