Connecting Form Components

Thus far, our application has been non-interactive. We can currently click on Pilot and Mech list items to select them, but there’s no way to modify anything. It’s time to start implementing some interactivity.

Creating the Form Update Logic

Our first task is to hook up the <UnitInfo> form so that we can edit the current unit’s name and change what Battletech House or mercenary group they’re affiliated with. We’ll need to add an action type and a case reducer to handle those updates, then modify <UnitInfo> so that it dispatches the action in response to onChange callbacks from the inputs.

Commit 3360ece: Implement initial unit info update handling

The action/reducer changes are simple. New action type, a matching action creator, and a case reducer:

features/unitInfo/unitInfoReducer.js

+import _ from "lodash";

import {DATA_LOADED} from "features/tools/toolConstants";
+import {UNIT_INFO_UPDATE} from "./unitInfoConstants";

+function updateUnitInfo(state, payload) {
+   const updates = _.pick(payload, ["name", "affiliation"]);
+
+   return {
+       ...state,
+       ...updates
+   };
+}

export default createReducer(initialState, {
    [DATA_LOADED] : dataLoaded,
+   [UNIT_INFO_UPDATE] : updateUnitInfo,
});

We could create entirely separate action types and reducers for updating the “Name” field and the “Affiliation” field, but that would be a waste of effort. Defining action payloads and reducer logic involves tradeoffs, and it’s up to you to decide when actions should be more specific or more general ...