Proposal for a React component with state managed by actions and a reducer.

index.js

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

export class Layout extends Component {
  state = initialState

  reduce = (action) =>
    this.setState(reducer(action, this.state))

  render() {
    return (
      <div>
        <h1>Placeholder</h1>
        <button onClick={() => this.reduce({ type: 'INCREMENT' })} />
      </div>
    )
  }
}

initialState.js

export default {
  counter: 0
}

reducer.js

export default function(action, state) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 }
  }
}