Search⌘ K
AI Features
Home
Courses
Practical Redux

Editing Pilot Entries

Explore how to enable editing of Pilot entries in Redux by connecting form inputs to generic update actions. Understand handling changes for text and dropdown fields, buffering input to reduce dispatch frequency, and managing updates within a shared state.

We'll cover the following...

Now that we have our generic entity update reducer in place, we can implement the ability to edit Pilot entries. We already set up the “start/stop editing” toggle last time, so we just need to hook up the event handlers and dispatch the right actions.

Hooking Up Pilot Inputs

We’ll start with the Pilot’s name field:

Commit efe8854: Hook up editing of pilot name field

features/pilots/PilotDetails.jsx


+import {updateEntity} from "features/entities/entityActions";
+import {getValueFromEvent} from "common/utils/clientUtils";

const actions = {
    startEditingPilot,
    stopEditingPilot,
+   updateEntity,
}

export class PilotDetails  extends Component {
+   onNameChanged = (e) => {
+       const newValues = getValueFromEvent(e);
+       const {id} = this.props.pilot;
+
+       this.props.updateEntity("Pilot", id, newValues);
+   }

// Omit most rendering code

                <Form.Field
                    name="name"
                    label="Name"
                    width={16}
                    placeholder="Name"
                    value={name}
                    disabled={!canStopEditing}
+                   onChange={this.onNameChanged}
...