Imperative Action Type

coupling-in-component.js

// scoreboard-reducer.js
const INITIAL_STATE = {
  home: 0,
  away: 0,
}
export const scoreboardReducer = (state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'INCREMENT_HOME_SCORE':
      return {...state, home: state.home + 1 };
    case 'INCREMENT_AWAY_SCORE':
      return {...state, away: state.away + 1 };
    default:
      return state;
  }
}

// audience-reducer.js
const INITIAL_STATE = 0; // represents audience excitement;
export const audienceExcitementReducer = (state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'INCREASE_AUDIENCE_EXCITEMENT':
      return state + 1; // audience gets more excited
    default:
      return state;
  }
}

// coupling in some container component.js
export class Game extends React.Component {
  ....
  onHomeGoal() {
    this.props.dispatch({type: 'INCREMENT_HOME_SCORE'});
    this.props.dispatch({type: 'INCREASE_AUDIENCE_EXCITEMENT'});
  }
  onAwayGoal() {
    this.props.dispatch({type: 'INCREMENT_AWAY_SCORE'});
    this.props.dispatch({type: 'INCREASE_AUDIENCE_EXCITEMENT'});
  }
}

coupling-in-side-effect-handler.js

// Another version of this implementation
// scoreboard-reducer.js
const INITIAL_STATE = {
  home: 0,
  away: 0,
}
export const scoreboardReducer = (state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'INCREMENT_HOME_SCORE':
      return {...state, home: state.home + 1 };
    case 'INCREMENT_AWAY_SCORE':
      return {...state, away: state.away + 1 };
    default:
      return state;
  }
}

// audience-reducer.js
const INITIAL_STATE = 0; // represents audience excitement;
export const audienceExcitementReducer = (state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'INCREASE_AUDIENCE_EXCITEMENT':
      return state + 1; // audience gets more excited
    default:
      return state;
  }
}

export class Game extends React.Component {
  ....
  onHomeGoal() {
    this.props.dispatch({type: 'INCREMENT_HOME_SCORE'});
  }
  onAwayGoal() {
    this.props.dispatch({type: 'INCREMENT_AWAY_SCORE'});
  }
}

// coupling in side-effect-handler.js (using redux-saga)
export function* watchIncrementHomeScore() {
  yield takeEvery(['INCREMENT_HOME_SCORE','INCREMENT_AWAY_SCORE'], updateAudienceExcitement);
}

export function* updateAudienceExcitement() {
  yield put({ type: 'INCREASE_AUDIENCE_EXCITEMENT'});
}