Structuring Redux state for complex relational domain model

Question

Consider the following typical CRUD application:

Data layer

Relational domain model with one-to-one, one-to-many and many-to-many relations between entities. Entities are persisted in relational database.

Service layer

Service layer provides a REST API handling GET , POST , PUT and DELETE methods on entities to perform business transactions.

Client state layer

Client state is managed by Redux state container. Redux stores representation of entities in the data layer and the pending transactions on them. Redux middleware is utilized for more hygienic and easier to reason about code.

Presentation layer

UI is implemented using React with client-side rendering. Components internal states are used for minor state management as "prelude" to initiating transactions with bigger brush (Redux actions).

Which is the best approach to structure the Redux state, reducers, actions and subscriptions for complex domain model? Of course minimizing the code duplication yet enabling loose coupling and independent actions on entities? Also, is it better to manage "unsaved changes" and validation logic on components internal states?

Answer 1

For managing relational domain in Redux, try normalized-reducer . It is a higher-order-reducer that takes a schema describing the relationships, and it returns a reducer, actions, and selectors that let you write/read accordingly. It also integrates easily with Normalizr and Redux Toolkit.