React Redux

Vue.jsのVuexと似てるけど、こんなんだったっけな。

import React from 'react';
import QuxComponent from '../QuxComponent/QuxComponent';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const BazComponent = () => {
  const initial_state = {
    a: 1,
    b: 2,
    c: 3,
  }

  const reducer = (state = initial_state, action) => {
    switch (action.type) {
      case 'increment':
        return {
          ...state,
          a: state.a + 1,
          b: state.b * 2,
        }
      default:
        return state
    }
  }
  const store = createStore(reducer)

  return (
    <div className="App">
      BazComponent<br/>
      <Provider store={store}>
        <QuxComponent/>
      </Provider>
    </div>
  )
};

export default BazComponent;

import React, { Component } from 'react';
import { connect } from 'react-redux';

class QuxComponent extends Component {
  constructor (props) {
    super(props)
    this.doAction = this.doAction.bind(this)
  }

  doAction () {
    this.props.dispatch({ type: 'increment' })
  }

  render () {
    return (
      <div className="App">
        QuxComponent Component
        <div>{this.props.a}</div>
        <div>{this.props.b}</div>
        <div>{this.props.c}</div>
        <button onClick={this.doAction}>increment</button>
      </div>
    )
  }
}

QuxComponent = connect(state => state)(QuxComponent)

export default QuxComponent;