Redux

import React from 'react';
import { createStore } from 'redux';

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'incement':
      return state + 1;
    case 'decment':
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counter);

const connect = (store, ReactClassOrFunctionalComponent) =>
  class ProxyComponent extends React.Component {
    unsubscribe = null;
    constructor(props) {
      super(props);
      this.state = {
        value: store.getState(),
      };
    }
    componentDidMount() {
      this.unsubscribe = store.subscribe(() => {
        this.setState({ value: store.getState() });
      });
    }
    componentWillUnmount() {
      this.unsubscribe && this.unsubscribe();
    }
    render() {
      return (
        <ReactClassOrFunctionalComponent
          $store={store}
          value={this.state.value}
        />
      );
    }
  };

class MyClassCounter extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <p>{this.props.value}</p>
        <button onClick={() => this.props.$store.dispatch({ type: 'decment' })}>
          Click me
        </button>
      </div>
    );
  }
}

const MyFunctionalCounter = (props) => {
  return (
    <div>
      <p>{props.value}</p>
      <button onClick={() => props.$store.dispatch({ type: 'incement' })}>
        Click me
      </button>
    </div>
  );
};

const ReduxMyClassCounter = connect(store, MyClassCounter);
const ReduxMyFunctionalCounter = connect(store, MyFunctionalCounter);

console.log(ReduxMyClassCounter);

export default function App() {
  return (
    <div>
      <strong>Hello world!</strong>
      <ReduxMyClassCounter />
      <ReduxMyFunctionalCounter />
    </div>
  );
}