React Redux Sample

react-redux-sample.js

import React from "react";
import { createStore } from "redux";
import { connect, Provider } from "react-redux";

const ACTIONS_INC = "ACTIONS_INC";
const ACTIONS_DEC = "ACTIONS_DEC";

function counter(state = { count: 0 }, { type }) {
  const actions = {
    [ACTIONS_INC]: () => ({ count: state.count + 1 }),
    [ACTIONS_DEC]: () => ({ count: state.count - 1 })
  };

  return (actions[type] || (() => state))();
}

const store = createStore(counter);

const DisplayCounter = connect(state => state)(props => {
  console.log("Render DisplayCounter");
  return <div>Count: {props.count}</div>;
});

const ToolsCounter = connect()(props => {
  console.log("Render ToolsCounter");
  const { dispatch } = props;
  return (
    <div>
      <button onClick={() => dispatch({ type: ACTIONS_INC })}>+</button>
      <button onClick={() => dispatch({ type: ACTIONS_DEC })}>-</button>
    </div>
  );
});

function App() {
  console.log("Render App");
  return (
    <Provider store={store}>
      <div className="App">
        <DisplayCounter />
        <ToolsCounter />
      </div>
    </Provider>
  );
}

export default App;