Increase your React + Redux Application Performance with Reselect Library
source link: https://www.tuicool.com/articles/32Iz2me
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Squeeze more performance out of your React and Redux applications with selectors.
Oct 2 ·5min read
Selectors are a handy way to “select” state from the redux store. Redux store holds all our application logic and data, and selectors are used to picking certain pieces of state out of the store.
If you’re building your applications using React and Redux, you might benefit a lot from using selectors.
What do selectors look like?
Before we dive into why selectors are handy and how to use them — let’s see what our application looks without them. I’ve created the very minimum we need already. Here’s a very basic redux setup;
- we have the
rootreducerwhich currently holds all the data about our animals.
- Our
rootreduceris passed to the store, and the store is passed to the<Provider> - Finally, the
PetsContainer.jsconnects to the store, picks the animals, finds all the dogs in the data, and renders them on the screen.
Okay, let’s say want to select all the dogs from the store and render them on the screen. How would we go about doing that? A naive approach would look like the following below.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK