Как подписать несколько компонентов на действие в Redux без React?

Question

Я работаю над приложением JQuery. Я хотел бы добавить магазин Redux, чтобы начать обработку состояния приложения по мере добавления функций. Как получить несколько элементов для подписки на отправленные действия, которые происходят в подсостоянии?

Я хотел бы иметь возможность сделать что-то похожее на то, как connect () использует mapStateToProps & mapDispatchToProps для соединения нескольких компонентов вact-redux. Примеры здесь & здесь .

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>