Mitu217
2/16/2017 - 9:30 AM

React + Reduxサンプル(動作未検証)

React + Reduxサンプル(動作未検証)

import React from 'react'
import { connect } from 'react-redux';
import { increment } from './actions';

class Main extends React.Component {

  handleIncrement() {
    this.props.dispatch(increment());
  }

  render() {
    return(
      <div>
        <h1>Counter Example</h1>
        <p>
          Clicked: { this.props.counter } times
          {" "}
          <button className='increment' onClick={ this.handleIncrement.bind(this) }>+</button>
        </p>
      </div>
    );
  }
}

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

export default connect(mapStateToProps)(Main);
import { createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducers';

export default function configureStore(initialState) {
  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(
    reducer,
    initialState,
  );

  return store;
}
import { combineReducers } from 'redux';
import counter from './counter';

const rootReducer = combineReducers({
  counter
});

export default rootReducer;
export default function counter(state = 0, action) {
  switch(action.type) {
    case 'increment':
      return state + 1;
    default:
      return state;
  }
}
import { createAction } from 'redux-actions';

export const increment = createAction('increment');