Search⌘ K
Home
Courses
Practical Redux

Generic Reducer Logic for Editing Entities

Explore how to manage form draft data and CRUD operations in Redux by creating generic reducer logic for editing entities. Understand how to copy, update, and delete draft data in the Redux state using utility functions and existing case reducers, enabling efficient and clean state management for editing workflows.

We'll cover the following...

Before we create the actual core reducer logic, we’ll add some utility functions to encapsulate behavior. We’ll have a small function to update state.entities, and another to update state.editingEntities. We’ll also create a small function to access a given Redux-ORM Model instance, and ask it to copy its entire contents into a plain JS object:

Commit 17d04ef: Add editing utility functions

features/editing/editingUtilities.js

import orm from "app/orm";
import {getModelByType} from "common/utils/modelUtils";

export function updateEditingEntitiesState(state, updatedEditingEntities) {
    return {
        ...state,
        editingEntities : updatedEditingEntities,
    };
}

export function updateEntitiesState(state, updatedEntities) {
    return {
        ...state,
        entities : updatedEntities,
    };
}

export function readEntityData(entities, itemType, itemID) {
    const readSession = orm.session(entities);

    // Look up the model instance for the requested item
    const model = getModelByType(readSession, itemType, itemID);
    const data = model.toJSON();

    return data;
}

(Yes, those two “update” functions are trivial, and not really needed here, but it’s a small bit of encapsulation.)

As we saw earlier with code that used parse(), here we’re expecting that all our Model instances will have a toJSON() method. Again, that’s something we’re writing ourselves as a common convention, not anything that’s built in to Redux-ORM.

On ...