I'm working on a JQuery application. I'd like to add a Redux store to begin handling the app state as I add features. How do I get multiple elements to subscribe to dispatched actions that occur in a substate?
I'd like to be able to do something similar to how connect() uses mapStateToProps & mapDispatchToProps to wire up multiple components in react-redux. Examples here & here.
const CHECKBOX_CLICK = 'CHECKBOX_CLICK';
function checkboxClick(id, value) {
  return {
    type: CHECKBOX_CLICK,
    id,
    value,
  }
}
const monsterCheckboxReducer = (state = [], action) => {
  const {
    type,
    ...actionData
  } = action;
  switch (type) {
    case CHECKBOX_CLICK:
      console.log(actionData);
      return [...state, actionData];
    default:
      return state;
  }
};
const appReducer = Redux.combineReducers({
  monsterCheckbox: monsterCheckboxReducer,
});
const enhancers = Redux.compose(
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
const defaultState = [];
const store = Redux.createStore(
  appReducer,
  defaultState,
  enhancers
);
const unsubscribe = store.subscribe(() => {
  console.log('state changed:', store.getState())
});
$("#monsterFeaturesCheckbox :checkbox").change(function() {
  store.dispatch(checkboxClick(this.id, this.checked));
  //The usual JQuery way to handle events
  if (this.checked) {
    //Do stuff
  }
});body {
  font-size: 1.3em;
  background: gray;
  color: bisque;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<fieldset id="monsterFeaturesCheckbox">
  <legend>Choose some monster features</legend>
  <div>
    <input type="checkbox" id="scales" name="feature" value="scales" checked />
    <label for="scales">Scales</label>
  </div>
  <div>
    <input type="checkbox" id="horns" name="feature" value="horns" />
    <label for="horns">Horns</label>
  </div>
  <div>
    <input type="checkbox" id="claws" name="feature" value="claws" />
    <label for="claws">Claws</label>
  </div>
</fieldset>
<fieldset id="boxyCheckbox">
  <legend>Choose some box features</legend>
  <div>
    <input type="checkbox" id="reinforced" name="feature" value="reinforced" />
    <label for="reinforced">reinforced</label>
  </div>
  <div>
    <input type="checkbox" id="locked" name="feature" value="locked" />
    <label for="locked">locked</label>
  </div>
</fieldset>