const initialState = {
 counter:0,
 }

 const store = createStore(reduce);

    const reduce = (state = initialState, action) => {
        switch(action.type) {
            case 'ACTION_CHANGE_COUNTER':
            return {...state, counter: ++action.payload };
            case 'RESET_COUNTER':
            return {...state, counter: action.payload};
        }
        return state;
    }

const ACTION_CHANGE_COUNTER = 'ACTION_CHANGE_COUNTER';
const RESET_COUNTER = 'RESET_COUNTER';

const changeCounter = {
    type: ACTION_CHANGE_COUNTER,
    payload: initialState.counter
}

const resetCounter = {
    type: RESET_COUNTER,
    payload: 0
}


class MainComponent extends React.Component {
    constructor(props) {
        super(props);
        this.press = this.press.bind(this);
        this.reset = this.reset.bind(this);
      }
    press() {
            store.dispatch(changeCounter)
    }
    reset() {
           store.dispatch(resetCounter) // reset срабатывает и на экране 0, но потом счет начинается не с нуля а с числа где был резет
    }
    render() {
        return <div>
            {
                this.props.counter
            }
        <button onClick={this.press}>ok</button>
        <button onClick={this.reset}>reset</button>
    </div>
    }
}

function mapStateToProps (state) {
    console.log(state)
    return {
        counter: state.counter,
    }
}
const WrapMainComponent = connect(mapStateToProps)(MainComponent);


ReactDOM.render(<Provider store={store}><WrapMainComponent/></Provider>
    , document.getElementById('app')
)

const reduce = (state = initialState, action) => {
  switch (action.type) {
    case "ACTION_CHANGE_COUNTER":
      return { ...state, counter: state.counter + 1 };
    case "RESET_COUNTER":
      return { ...state, counter: 0 };
  }
  return state;
};

const ACTION_CHANGE_COUNTER = "ACTION_CHANGE_COUNTER";
const RESET_COUNTER = "RESET_COUNTER";

const changeCounter = {
  type: ACTION_CHANGE_COUNTER,
};

const resetCounter = {
  type: RESET_COUNTER,
};

const reduce = (state = initialState, action) => {
  switch (action.type) {
    case "ACTION_CHANGE_COUNTER":
      return { ...state, counter: action.payload };
    case "RESET_COUNTER":
      return { ...state, counter: 0 };
  }
  return state;
};

....

const changeCounter = (counter) => ({
  type: ACTION_CHANGE_COUNTER,
  payload: counter,
})
....

  press() {
    store.dispatch(changeCounter(this.props.counter + 1));
  }

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

const initialState = {
  counter: 0
};

const reduce = (state = initialState, action) => {
  switch (action.type) {
    case "ACTION_CHANGE_COUNTER":
      return { ...state, counter: action.payload };
    case "RESET_COUNTER":
      return { ...state, counter: 0 };
  }
  return state;
};

const ACTION_CHANGE_COUNTER = "ACTION_CHANGE_COUNTER";
const RESET_COUNTER = "RESET_COUNTER";

const changeCounter = (counter) => ({
  type: ACTION_CHANGE_COUNTER,
  payload: counter,
})

const resetCounter = () => ({
  type: RESET_COUNTER,
})

// кроме рендера ничего нет, можно заменить класс на функцию
class MainComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.counter}
        <button onClick={() => this.props.changeCounter(this.props.counter + 1)}>ok</button>
        <button onClick={this.props.resetCounter}>reset</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state);
  return {
    counter: state.counter
  };
}

const WrapMainComponent = connect(mapStateToProps,
  { changeCounter, resetCounter }
  )(MainComponent);

const store = createStore(reduce);

ReactDOM.render(
  <Provider store={store}>
    <WrapMainComponent />
  </Provider>,
  document.getElementById("app")
);