redux normal; for an article

actions.js

export const REPLACE_THINGS = "REPLACE_THINGS"
export const REMOVE_THING = "REMOVE_THING"
export const ACCUMULATE_THINGS = "ACCUMULATE_THINGS"
export const RESET_THINGS = "RESET_THINGS"

export const UI_THING_ON = "UI_THING_ON"
export const UI_THING_OFF = "UI_THING_OFF"

CoolComponent.jsx

import { RESET_THINGS } from "./actions"

const enhance = connect(({ things }) => ({ things }), {
  resetThings: things => ({
    type: RESET_THINGS,
    things
  })
})
const CoolComponent = ({ things, resetThings }) => (
  <Fragment>
    <button onClick={resetThings}> Reset </button>
    {things.map(i => <span>{i}</span>)}
  </Fragment>
)
enhance(CoolComponent)

things.js

// define the first reducer
import {
  REPLACE_THINGS,
  REMOVE_THING,
  ACCUMULATE_THINGS,
  RESET_THINGS,
  CLICKED_A_THING
} from "./actions"

export const thingsReducer = (state = [], { type, id, things, thing }) => {
  switch (type) {
    case REPLACE_THINGS:
      return things
    case REMOVE_THING:
      return state.filter(i => i.id !== id)
    case ACCUMULATE_THINGS:
      return [...state, thing]
    case RESET_THINGS:
      return []
    default:
      return state
  }
}

uiThing.js

// define yhe second reducer
import { CLICKED_A_THING, UI_THING_ON, UI_THING_OFF } from "./actions"

export const uiThingReducer = (state = false, { type }) => {
  switch (type) {
    case RESET_THINGS:
      return false
    case UI_THING_ON:
      return true
    case UI_THING_OFF:
      return false
    default:
      return state
  }
}