Redux Many to Many Relationship

Question

I'm trying to figure out a good structure to create a many to many relationship in Redux. For this example we have images (which can have multiple tags) and tags (which can have multiple images).

Is this a good way to structure it in Redux?

images: {
    1: {
        title: "A bunch of hills"
    },
    2: {
        title: "Hiking in a forest"
    }
},
tags: {
    1: {
        title: "landscape"
    },
    2: {
        title: "outdoors"
    }
},
imagesTags: {
    [
        image: 1,
        tag: 1
    ],
    [
        image: 1,
        tag: 2
    ],
    [
        image: 2,
        tag: 2
    ]
}

It does mean I have to create a separate reducer which messes with my modular structure but I guess that is always going to be the result of having related reducers.

Answer 1

Yep, this is an example of a "normalized" state. The Redux docs cover normalization in the Structuring Reducers section. See Structuring Reducers - Prerequisite Concepts, Structuring Reducers - Normalizing State Shape, and Structuring Reducers - Updating Normalized Data. Also, the Redux FAQ discusses normalization in "How do I organize nested or duplicate data in my state?".

Beyond that, I'm a big fan of using a library called Redux-ORM to manage that relational data in my Redux store. I've written a couple posts that discuss how I use it: Practical Redux Part 1: Redux-ORM Basics and Practical Redux Part 2: Redux-ORM Concepts and Techniques. The rest of my "Practical Redux" tutorial series also shows this library in action.