Counter.js

import React, {Component} from 'react'
import {connect} from 'react-redux'


class Counter extends Component {

  constructor(props) {

    super(props)
  }

  render() {

    let resultItems = this.props.results.map((result) => {
      return (
        <li>{result}</li>
      )
    })

    return (
    <div>
        <h1>{this.props.counter}</h1>
        <button onClick={this.props.onAddCounter}>Increment +1</button>
        <hr />
        <button onClick={this.props.onStoreResult}>Store Result</button>
        <ul>
          {resultItems}
        </ul>
    </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    counter : state.counter,
    results : state.results
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onIncrementCounter : () => dispatch({type : "INCREMENT_COUNTER"}),
    onAddCounter : () => dispatch({type : "ADD_COUNTER", value : 10}),
    onStoreResult : () => dispatch({ type : "STORE_RESULT"})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import {MovieList} from './components/MovieList'
import {MovieDetails} from './components/MovieDetails'
import {createStore} from 'redux'
import reducer from './store/reducer'
import { Provider } from 'react-redux'
import Counter from './components/Counter'

const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ReactDOM.render(
  <BrowserRouter>
  <Provider store = {store}>
    <App>
      <Switch>
        <Route path = "/movies/:movieId" component = {MovieDetails} />
        <Route path = "/counter" component = {Counter} />
        <Route path = "/" component = {MovieList} />
      </Switch>
    </App>
  </Provider>
</BrowserRouter>


, document.getElementById('root'));
registerServiceWorker();

reducer.js

const initialState = {
  counter : 0,
  results : []
}

const reducer = (state = initialState, action) => {

  switch(action.type) {
    case "INCREMENT_COUNTER":
      return {
        ...state,
        counter : state.counter + 1
      }
    case "ADD_COUNTER":
      return {
        ...state,
        counter : state.counter + action.value
      }
    case "STORE_RESULT":
      return {
        ...state,
        results : state.results.concat(state.counter)
      }
  }

  return state
}

export default reducer