React state management ideas

1.ts

interface State {
  counter: number
}

const counterModel = {
  initial(): State {
    return {
      counter: 0
    };
  },
  increment({ counter }: State): State {
    return {
      counter: counter + 1
    };
  },
  decrement({ counter }: State): State {
    return {
      counter: counter + 1
    };
  },
  async incrementDelayed({ counter }: State): Promise<State> {
    await new Promise(resolve => setTimeout(resolve, 500));
    return {
      counter: counter + 1
    };
  }
};

///
    
import React from 'react';

class SmartComponent extends React.Component<{}, State> {
  state = counterModel.initial()

  counterHandlers = localStateHandlers(this, counterModel)
}

///

const reducer = combineReducers({
  counter: makeReducer(counterModel)
});

const actions = makeActions(counterModel, (name) => `COUNTER_${name}`)

///

const { Provider, Consumer } = makeContext({
  counter: counterModel
})

<Provider>
  <Consumer>
    {({ counter }) => <div>
      <button onClick={counter.increment}>Increment</button>
    </div>}
  </Consumer>
</Provider>