@tomofromearth I was having the same struggles, but I solved it as follows:
If you look back into step 4, a recommended format for storing the comments is suggested:
{
123: ['Great article!' , 'I disagree.']
456: ['This is some great writing.'],
...
}
No further instructions on how to accomplish this are provided, so you may have skipped it (as I did), assuming that the object returned would already be in the format proposed, which is not the case.
In order to format the action.payload
in that way, we need to look into how the payload actually looks like:
{
"articleId": 5,
"comments": [
{
"id": 1,
"articleId": 5,
"text": "Congratulations Kamala."
},
{
"id": 2,
"articleId": 5,
"text": "Wow, very cool."
}
]
}
The way I got it stored in byArticleId
formated in the right way, so later on It can be used in Comments
by commentsForArticleId
using comments[article.id]
looks like this:
.addCase(loadCommentsForArticleId.fulfilled, (state, action) => {
state.isLoadingComments = false;
state.failedToLoadComments = false;
state.byArticleId = {[action.payload.articleId]: action.payload.comments};
})
Now, when selecting an article, my byArticleId
property returns an object with the expected format and the comments will be rendered:
byArticleId: {
'5': [
{
id: 1,
articleId: 5,
text: 'Congratulations Kamala.'
},
{
id: 2,
articleId: 5,
text: 'Wow, very cool.'
}
]
}