Redux状态设计

Question

I'm new to Redux. I want to refine my app's state design. Roughly I have 3 pages that users may recognize.

• Page 1 is for printing list of articles.
• Page 2 is for editing an article.
• Page 3 is for printing list of appendixes, and editing parameters of each appendix here.

I have designed it like this. Does it have no problem?

{
    articles : [
        {
            id,
            title,
            body,
            appendixIds
        },
        ...
    ],
    isFetchingArticles,
    articlesPagination : {
        pageSize,
        pageIndex
    },
    appendixes : [
        {
            id,
            title,
            body,
            configs
        }
    ],
    isFetchingAppendixes,
    appendixesPagination: {
        pageSize,
        pageIndex
    }
}

Answer 1

State design is often up to interpretation, however, something that can help is thinking about how you will set up your reducers.

If you're using combineReducers then the state will be broken up into one object for each reducer you pass into it. So for example, if you have one reducer for articles and another for appendices, then the state resulting from using combineReducers would look something like this:

{
   articles: {
     ....
   },
   appendices: {
     ...
   }
}

Using this, what could be more beneficial would be to set up your state like this:

{
   articles: {
      items: [
        {
           id: x,
           title: x,
           body: x,
           appendices: x
        },
        ...
      ],
      isFetching: false,
      pagination: {
         size: x,
         index: x
      }
   },
   appendices: {
     ...
   }
}

Also, take a look at normalizr https://github.com/paularmstrong/normalizr . This normalises your state tree, so you could use it for references to other objects like your appendixIds in the articles.