react-redux-simple

counter.js

import React from "react";
import { render } from "react-dom";
import { connect } from "react-redux";

// 単純に props の value を表示するプレゼンテーションコンポーネントと、
// Reduxの管理するストアからステートを受け取り、コンポーネントの props にマッピングするコンテナコンポーネント
const ValueComponent = props => <>value = {props.value}</>;
export const Value = connect(state => ({
  value: state.value
}))(ValueComponent);

// 単純に更新アクションを発行するボタンコンポーネントと、Reduxに接続するコンテナコンポーネント
// dispatch 直接呼んでるけどよくない
const UpdateButtonComponent = props => (
  <button
    onClick={() => props.dispatch({ type: "ADD", payload: { value: 2 } })}
  >
    ADD 2
  </button>
);
export const UpdateButton = connect()(UpdateButtonComponent);

index.js

import React from "react";
import { render } from "react-dom";
import "./index.css";

// createStoreとProviderの import
import { createStore } from "redux";
import { Provider } from "react-redux";

import { UpdateButton, Value } from "./counter";

// 初期ステートを定義
const initialState = {
  value: 0
};

// reducer
// ステートを更新するための関数
const reduceFunction = {
  ADD: (state, data, meta) => ({ ...state, value: state.value + data.value })
};

const reducer = (state, action) => {
  const f = reduceFunction[action.type] || (s => s);
  return f(state, action.payload, action.meta);
};

// ステートを保持するストアの作成
const store = createStore(reducer, initialState);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <h1>Counter on React-Redux!</h1>
          <Value />
          <UpdateButton />
        </div>
      </Provider>
    );
  }
}

render(<App />, document.getElementById("content"));