1

How should one structure Redux state when retrieving domain objects that have different search parameters.

In my application I display a list of organisations that the user filters, in a table. On the same page I will also display a smaller list of organisations that a user is part of, and perhaps in the future another small list on the same page that displays only organisations from another user.

Do i do this:

{
    list_organisations: [
        { id: 1, name: 'foo1' //... },
        { id: 2, name: 'foo2' //... },
        { id: 3, name: 'foo3' //... },
        { id: 4, name: 'foo4' //... },
        { id: 5, name: 'foo5' //... },
    ],
    user_one_organisations: [
        { id: 6, name: 'foo' //... },
        { id: 2, name: 'foo' //... },
    ],
    user_two_organisations: [
        { id: 4, name: 'foo' //... },
        { id: 6, name: 'foo' //... },
    ],  
}

or this: 

{
    users: [
        { id: 1, organisations: [7,3,8], name: 'billy' },
        { id: 2, organisations: [3,6,1], name: 'sam' },
    ]
    organisations: [
        { id: 1, name: 'foo', //... },
        { id: 2, name: 'foo1', //... },
        { id: 3, name: 'foo2', //... },
        { id: 4, name: 'foo3', //... },
        { id: 5, name: 'foo4', //... },
        { id: 6, name: 'foo5', //... },
        { id: 7, name: 'foo6', //... },
        { id: 8, name: 'foo7', //... },
        { id: 9, name: 'foo8', //... },
    ],  
}

If we go with option two, what do we do in the case that we need to lookup a single organisation for some purpose e.g. "check if a users email exists within an organisation" -- it all just seems so complex... especially when doing one off requests? should that even live in the redux state?

That would make it like so:

{
    users: [
        { id: 1, organisations: [7,3,8], name: 'billy' },
        { id: 2, organisations: [3,6,1], name: 'sam' },
    ]
    organisation_signup_form: {
        doesUsersEmailExist: true / false / null,
    }
    organisations: [
        { id: 1, name: 'foo', //... },
        { id: 2, name: 'foo1', //... },
        { id: 3, name: 'foo2', //... },
        { id: 4, name: 'foo3', //... },
        // ...
    ],  
}
Clarkie
  • 7,490
  • 9
  • 39
  • 53
AndrewMcLagan
  • 13,459
  • 23
  • 91
  • 158

1 Answers1

3

I'd actually recommend structuring your data in a completely different way. You want to make sure that all of your models are easy to get at so keeping them in an array can be tricky.

I'd suggest a state structure something like this:

users: {
    1: { id: 1, organisations: [7,3,8], name: 'billy' },
    2: { id: 2, organisations: [3,6,1], name: 'sam' },
},
userList: [1,2],
organisation_signup_form: {
    doesUsersEmailExist: true / false / null,
},
organisations: {
    1: { id: 1, name: 'foo', //... },
    2: { id: 2, name: 'foo1', //... },
    3: { id: 3, name: 'foo2', //... }
}

I got this advice from Dan on this question

check if a users email exists within an organisation

You don't have an email on the user model and it's not clear so it's quite difficult to answer that specific question.

One bit of advice I'd give is that you need to structure your state in a database kind of way but it doesn't have to be the same structure as your actual database or api endpoints.

Community
  • 1
  • 1
Clarkie
  • 7,490
  • 9
  • 39
  • 53
  • Hmm i like it. Although do I respond from my API server with this structure? Or build it out in the reducers? I'd prefer to keep my API non-redux specific :) – AndrewMcLagan Apr 29 '16 at 09:03
  • exactly, keep your api true to itself. The client implementation should define how you return your data. It can influence it but not define it. – Clarkie Apr 29 '16 at 09:18
  • Cool. One last question! Is there a neat trick to key the entities with their ID? I don't want heavy reducers? – AndrewMcLagan Apr 29 '16 at 09:30
  • I use the immutability helpers and do something like this: `{[action.user.id]: action.user}` https://facebook.github.io/react/docs/update.html – Clarkie Apr 29 '16 at 09:35