ReactJS+Redux+ES6 카운터의 샘플

의 목적

레드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

http://localhost:8000

감상

예전에 살짝 건드렸을 때 레드ux의 examples, 나는 connect가 장식물을 사용한 줄 알았는데export default connect(hoge..）의 기술이 되었다.아무래도 이쪽이 쉬울 것 같아서요.

웹 패키지를 사용하지 않으면 움직이지 않을 줄 알았는데 바벨리프도 움직였다.

그냥 건드렸지만 생각보다 레드ux 느낌이 더 좋았다.

참고 자료

https://github.com/rackt/redux

https://github.com/rackt/redux/tree/master/examples/counter

https://github.com/jackielii/simplest-redux-example