0

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>
maogenc
  • 203
  • 7
  • 13
  • Not 100% sure what you're asking, but all reducers are 'listening' for any action. Your `case` will determine if it should be acted on. If there is code to handle a certain action type in multiple reducers it should work as expected. Hopefully that's what you meant, but please clarify if not. – joknawe Jun 30 '18 at 00:16
  • My application is wandering into being gnarly complicated. I was hoping I could have a jQuery element respond to a Redux state change in a React-Redux-like way. jQuery tends to keep track of the state in individual elements. Conversely, React-Redux seems to prefer centralizing the state, separating the view from the state. For connect(), It looks like mapStateToProps lets you choose which properties of the global state are needed in a component, while mapDispatchToProps seems to let you choose which part of the substate actions are restricted to. – maogenc Jul 01 '18 at 16:53

0 Answers0