recompose.js

// @flow
import * as React from "react";
import * as Recompose from "recompose";

declare type HelloProps = {
  compiler: string,
  framework: string
};

const reducer = (state: ControllerState, action: Action): ControllerState => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, counter: state.counter + action.payload };
    case "DECREMENT":
      return { ...state, counter: state.counter - action.payload };
    case "RESET":
      return { ...state, counter: 0 };
    default:
      return state;
  }
};

type Action = { type: "INCREMENT", payload: number } | { type: "DECREMENT", payload: number } | { type: "RESET" };

type ControllerState = { counter: number, last: string };

const initialState = { counter: 0, last: "fufu" };

const r = Recompose.withReducer("counter", "dispatch", reducer, initialState);

const p = Recompose.mapProps((owner: HelloProps) => {
  return { ...owner, framework: owner.framework.toUpperCase() };
});

const enhance = Recompose.compose(r, p);

export const Hello = enhance(({ counter, dispatch, framework, compiler }) => (
  <div>
    Från props: {framework}{compiler}<br />
    Från state: Count: {counter.counter}
    <button onClick={() => dispatch(({ type: "INCREMENT", payload: 3 }: Action))}>
      Increment
    </button>
    <button onClick={() => dispatch(({ type: "DECREMENT", payload: 2 }: Action))}>
      Decrement
    </button>
    <button onClick={() => dispatch({ type: "RESET" })}>
      Reset
    </button>
  </div>
));