function foo()
{
}

2016年4月30日土曜日

Reactの勉強(4) - Reduxを使ってみる

1. reduxとreact-reduxをインストール
$ npm install redux react-redux --save
2. Counter.jsとPlusMinusButton.jsを削除
3. index.jsを以下のように変更
import React from 'react';
import  { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

const reducer = (state={count: 0}, action) => {
  switch(action.type) {
    case 'PLUS_COUNT':
      return Object.assign({}, state, {count: state.count + 1});
    case 'MINUS_COUNT':
      return Object.assign({}, state, {count: state.count - 1});
    default:
      return state;
  }
};

const store = createStore(reducer);

const Counter = React.createClass({
  render() {
    return (
      <div>
         <h1>Counter </h1>
         <h2>{this.props.count} </h2>
         <button onClick={this.props.onPlusClick}>+ </button>
         <button onClick={this.props.onMinusClick}>- </button>
       </div>
    );
  }
});

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onPlusClick() {
      dispatch({type: 'PLUS_COUNT'});
    },
    onMinusClick() {
      dispatch({type: 'MINUS_COUNT'});
    }
  };
}

const StatefulCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

const App = () => {
  return (
    <div>
      <StatefulCounter />
    </div>
  );
}

render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
);

Reduxの主な要素は、Store, Reducer, Action。 Reducerはアクションに応じて新しい状態を作成する。Storeはアクションを受け取るとReducerを呼び出し、新しい状態を保持する。 connectによってReduxに結び付けられたCounterのpropsにステートとアクションが渡され、Storeを監視するようになる。状態が更新されるたびに関数MapStateToPropsを呼び出し、新しい状態をプロパティに変換し、それをもとにCounterは描画を更新する。

connectの第2引数がCounterのthis.props.onPlusClick/onMinusClickとして設定される。それぞれのボタンをクリックすると、アクションが作られdispatchによりReducerが呼ばれる。action.typeに従って、新しいステートが作られて画面が更新される。

0 件のコメント:

コメントを投稿