Redux exemple

App.js

import React, { Component } from 'react'
import store from './store.js'

class App extends Component {

  componentDidMount() {
    // subscribe to changes -> forceUpdate will ask React to re-render the view
    this.unsubscribe = store.subscribe(() => this.forceUpdate())
  }

  componentWillUnmount() {
    // when component is removed from the view -> remove the subscription
    this.unsubscribe()
  }

  render() {
    const state = store.getState()
    
    return (
      <div className="App">
        <span>Counter: {state.counter}</span>
        <button onClick={() => store.dispatch({ type: 'INCREMENT_COUNTER' })}>Increment</button>
        <button onClick={() => store.dispatch({ type: 'INCREMENT_COUNTER_BY_N', n: 10 })}>Increment by 10</button>
      </div>
    )
  }
}

reducer.js

const initialState = {
  counter: 0
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER': {
      return {
        ...state,
        counter: counter + 1
      }
    }
      
    case 'INCREMENT_COUNTER_BY_N': {
      return {
        ...state,
        counter: counter + action.n // n is passed through the action object
      }
    }
      
    default: return state   
  }
}

export default reducer