Menu
I have a list view, and a detail view on my application.
/list pulls down some general data about a bunch of objects and throws it into an array in redux
/list/5 grabs the details for one of the items on the list
/list is always called no matter what route you hit on the site, so the list eventually populates
I figured it would be best to store all of the details of the item when you hit the details route right in the items indexed location in the list array.
the problem is that the list takes longer to be retrieved than the items details if you go to the item details route first. I don't know what that items index will be in the array when I try to update it's location in redux.
Am I handling this wrong? Should I put the details for the items in a separate place in the store? My thinking was that if the user looks at details for an item twice I can check to see if the additional data is already in the list array index, and so I don't need to make another api call. it's just already there, but if it isn't then make the call and pull the additional details
Not sure if i'm explaining this right but i've been trying to find the right pattern for storing things with redux.
377
A store is an immutable object tree in Redux. A store is a state container which holds the application's state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer.
1) Having objects with unique IDs allows you to always use that id when referencing the object, so you have to pass the minimum amount of data between actions and reducers. It is more efficient than using array.
There is no “right” answer for this. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state.
It's simple to get access to the store inside a React component – no need to pass the store as a prop or import it, just use the connect function from React Redux, and supply a mapStateToProps function that pulls out the data you need. Then, inside the component, you can pass that data to a function that needs it.
Quoting from my answer at https://stackoverflow.com/a/40898120/62937:
Yes, a normalized Redux store is the standard recommendation. See Redux FAQ: How do I organize nested or duplicate data in my state? , Structuring Reducers - Normalizing State Shape, and the Selectors and Normalization part of my React/Redux links list for more information.
For manipulating relational/normalized data in your Redux store, I recommend a library called Redux-ORM. You should absolutely use Reselect in general, and Normalizr is good for normalizing data you've received, but Redux-ORM provides a useful abstraction layer for querying and updating that normalized data once it's in the store. I've written a couple blog posts describing its use: Redux-ORM Basics and Redux-ORM Concepts and Techniques.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
