0

My store:

{
  entities: {
    posts: {
      6: {
        id: 1,
        title: 'Some title',
        account_id: 2,
        ...
      }
    }
    comments: {
      1: {
        id: 1,
        name: 'Some name',
        ...
      }
    }
    accounts: {
      1: {
        id: 2,
        name: 'Antonio',
        ...
      }
    }
  }
  pagination: {
    // Comments by POST ID
    comments: {
      6: {
        ids: [1,2, ..., 6],
        isFetching: false,
        ...
      }
    }
  }
}

For every post page i have a comments sections, where i display all the comments. Comment component includes author username and the comment details. Comments and authors stored separately in the store as entities (comments, accounts) and connected only by FK (account_id). What i need is to display all the comments for the post including author information (username).

So, i decided to create 2 (reselect) selectors for that:

const getComments = state => state.entities.comments;
const getCommentIds = (state, props) => {
  const id = props.match.params.post;
  const comments = state.pagination.comments[id];

  return (comments && !comments.isFetching) ? comments.ids : [];
}
const getUsers = state => state.entities.accounts;

export const getPostComments = createSelector(
  [ getComments, getCommentIds ], (comments, ids) => {
    return ids.map(id => comments[id]);
  }
)

export const getCommentsWithAuthors = createSelector(
  [ getPostComments, getUsers ], (comments, users) => {
    return comments.map(comment => {
      const { username } = users[comment.account_id];

      return Object.assign({}, comment, { username });
    });
  }
)

mapStateToProps function:

const mapStateToProps = (state, props) => {
  const id = props.match.params.post;
  const { posts } = state.entities;

  return {
    post: state.entities.posts[id],
    comments: getCommentsWithAuthors(state, props)
  }
}

Everything is working fine, but i'm wondering if this is the common approach or maybe the architecture of my state object is poor and that is why i'm encountering with such a solution ?

Src
  • 5,252
  • 5
  • 28
  • 56
  • Your solution is pretty much spot on with how a lot of people do it, Here's a disection of Twitter's redux store that is similar in structure to yours: https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1. Reselect was created for exactly this use case. – Joe Ruello Mar 09 '18 at 01:41
  • @JoeRuello thanks, I’ll definitely look into that post. Basically, that means that my implementation is ok? – Src Mar 09 '18 at 01:49
  • Also you can check - [How to deal with relational data in Redux?](https://stackoverflow.com/q/45373369/4312466) – Jordan Enev Jul 31 '18 at 14:27

0 Answers0