export interface IActions {
  addToCounter: (amount: number) => void;
}

export interface IState {
  counter: number;
}

export interface IStore {
  state: IState;
  setState: (state: any) => void;
}

export const addToCounter = (store: IStore, amount: number) => {
  const counter = store.state.counter + amount;
  store.setState({ counter });
};

export default { addToCounter };

import React from "react";
import ReactHookz from "react-hookz";
import actions from "../actions";

export interface IState {
  counterA: number;
  counterB: number;
  postcode?: string;
}

const initialState: IState = {
  counterA: 1,
  counterB: 1,
  postcode: "3991"
};

const useReactHookz = ReactHookz(React, initialState, actions);

/**
 * Connect allows you to use the React Hookz functionality from a higher ordered component.
 * All properties and state will be avalibale.
 * @param Component Your component
 * @example connect(MyComponent);
 * @see https://github.com/GaryWenneker/react-hookz
 */
export const connect = <P extends object>(
  Component: React.ComponentType<P>
) => {
  return props => {
    let [state, actions] = useReactHookz();
    let _props = { ...props, state, actions };
    return <Component {..._props as P} />;
  };
};

export default useReactHookz;

import React from "react";
import { connect } from "../store";

interface Props {
  state: any;
  actions: any;
}

const Counter: React.FC<Props> = props => {
  const { state, actions } = props;
  return (
    <div className="Counter">
      <p>
        FC Counter:
        {state.counter}
      </p>
      <button type="button" onClick={() => actions.addToCounter(1)}>
        +1 to global
      </button>
    </div>
  );
};

export default connect(Counter);

import React from "react";
import ReactHookz from "react-hookz";
import { renderTime } from "../utils/index";
import Actions, { IState, IActions } from "../actions";

const initialState: IState = {
  counter: 1
};

const useReactHookz = ReactHookz(React, initialState, Actions);

const Counter: React.FC = () => {
  // using ReactHookz
  const [globalState, globalActions]: [IState, IActions] = useReactHookz();
  return (
    <div className="Counter">
      <p>
        FC Counter:
        {globalState.counter}
      </p>
      <button type="button" onClick={() => globalActions.addToCounter(1)}>
        +1 to global
      </button>
      <p>FC Counter {renderTime()}</p>
    </div>
  );
};

export default Counter;