Should data go in the state tree of reduction?

I lost a bit of what needs to be saved in the Redux state tree.

I have seen two conflicting statements about what to store in the tree (s) of state.

  • React doc tells us that only user input should be stored in state trees.

the original list of products is transmitted as a props, therefore , which is not indicated . The search text and checkbox seem to be in a state, as they change over time and cannot be calculated with anything. And finally, the filtered product list is not a state because it can be calculated by combining the original product list with the search text and the value of this flag.

  • The Redux doc tells us that we often need to store UI state and data in a single tree tree:

For our todo application, we want to store two different things:

  • The currently selected visibility filter;
  • Actual todos list.

You will often find that you need to save some data, as well as some UI state **, in the state tree. This is normal, but try to save the data separately from the state of the user interface.

So React reports that we should not store data (I'm talking about todos data), and for me, Redux says the opposite.

In my understanding, I would be inclined towards the React side, because both React and Redux tend to predict the state of the user interface, keeping:

  • everything that cannot be calculated (for example: all human inputs) and are part of the user interface:

    • flag value
    • input value
    • value of radio
    • ...
  • All the minimal data that can be used to build the request and send it to the API / database, which will return the full user profile, friends lists, anything ...:

    • user ID
    • creation date range
    • Item identifiers
    • ...

For me , which excludes all database / API results , because:

  • which stands at the data level
  • can be calculated by sending a request (and calculated using a clean gearbox).

So what is your opinion here?

+7
javascript ecmascript-6 reactjs redux flux
source share
2 answers

Recover View Component status documentation, but Redux documentation about Application status. Thus, there are no conflicts between definitions.

If we are talking about Redux , you make all your stateless components (and transform the stateless stateless component using the response-redux connect function). If you have a big answer from the server, and you show your data by page / filter, you can view the state of your application as what you see on the screen and not put all the data in the Redux repository, just what you need for render (e.g. 100 lines to show a page and total lines to show pagination). There are no restrictions for this . All data can be placed in another place. For example, in another data container in a web worker (I make a full request in a web worker and extract only the necessary data from it for display).


Added after editing the question:

The original list of products is transmitted as a props, so it is not indicated.

In this example, the reason the product list is not specified is that it is already in props . This means that one of the parent components has this state.

+6
source share

I feel the problem is that initially Redux was very confusing, and some people were such purists that they argued about decoupling everything from Redux and reassigning the entire application to every change. And then we ended up with this creator answer , which actually only added confusion because redux was and remains the de facto standard for new responsive applications, and many tutorials suggest this.

So, I feel that people are pressured on each side, and often they do some things without really understanding why they should (especially newbies creating constants, actions, and reducers). So, for those who read this, please start without abbreviation, and keep it only in the local state (but try to keep it in some component, like a DataContainer ). For those who need shrinking, the rule of thumb is all asynchronous data (so all requests go through shrinking) and the data needed for independent components. If the components are obviously located nearby, keep them local and pass them as a props.

Redux is a very useful library, but you need to use it only after you start to have at least several routes, various query options and some complicated interface. Prior to this, there is a good chance that you recycle (but, of course, if you are sure that you will exceed this size, do not hesitate to start with Redux). And again, you literally never want to put your slider or small drop-down position in the repository - the reaction state is ideal for it.

0
source share

All Articles