.js

// here is your normal component. at the moment, it doesn't do anything really.

class App extends React.Component {
  render() {
      return (
        <div className="App">
          <h1>Counter: {counter}</h1>
          <button onClick={() => {}}>+</button>
          <button onClick={() => {}}>-</button>
        </div>
  );
  }
}

export default App;

// so we need to connect it to the redux store. lets say your store just looks like this:
// { counter: 0 }

// so we need to use the 'connect' HOC from react-redux, so that your App component is connected to the store,
// ie so that it can actually update the store.

import { connect } from 'react-redux';
import { increaseCounter, decreaseCounter } from './my-actions';

class App extends React.Component {
  render() {
      return (
        <div className="App">
          <h1>Counter: {counter}</h1>
          <button onClick={this.props.increaseCounter}>+</button>
          <button onClick={this.props.decreaseCounter}>-</button>
        </div>
      );
  }
}

const mapDispatchToProps(dipatch => ({
  increaseCounter: () => dispatch(increaseCounter()),
  decreaseCounter: () => dispatch(decreaseCounter())
}));

// connect uses mapDispatchToProps to make the store's `dispatch` method available to you.
// don't worry too much about how this all works behind the scenes for now, but this is basically how you connect
// a react component up to redux (traditionally, using class components etc)
// don't worry about null as the first argument either, for now.
export default connect(null, mapDispatchToProps)(App)