The resulting props are guaranteed to be plain JavaScript objects that do notĬhange unless the underlying Immutable.js object also changes. If the mapStateToProps function is built using this function, The createPropsSelector function also handles the conversion from Immutable.js objects to plain JavaScript objectsĪutomatically. This is how we avoid most unnecessary re-renders without having This result is the same as before and will not update a component if its props The connect() function in react-redux checks if If each of the product details in this example are the sameįrom one update to the next, the mapStateToProps function will return exactly Memoization allows us to take advantage of the built-in update checks The createPropsSelector function uses Reselect to create a memoized selectorįunction. Selectors that retrieve those props from the store. In an object where the keys are the desired prop names and the values are the Repeatedly pass in the state object to each selector. TheĬreatePropsSelector function lets us use this pattern without having to Return an object with each key storing the result of a particular selector. Using the createPropsSelector function within mapStateToPropsĪ common pattern when writing mapStateToProps functions with selectors is to It also contains functions for simplifying the construction of selectors that traverse a tree of Immutable.js objects. The reselect-immutable-helpers library will automatically convert plain JavaScript objects into Immutable.js objects when necessary. Immutable.js objects are very useful in the Redux store, but they can be awkwardĪnd confusing to use when writing React components. Reselect-immutable-helpers that simplifies working with selectors and Immutable.js objects. We use a helper library (included via an npm package) called To learn more about working with these data types, visit the Immutable.js docs. Instead, Immutable.js provides functions and methods for comparing objects and creating modified copies of them. These immutable data structures cannot be compared or modified with standard JavaScript operators like = and =. The replacement for JavaScript arrays is called a list and the replacement for JavaScript objects is called a map. The immutable data structures replace JavaScript’s built-in data types. To satisfy this requirement, we use the immutable data structures provided by the Immutable.js library for the data we put in the Redux store. Instead, objects can be replaced with modified copies. This prevents changes to the state without the use of Reducers. Redux requires that the objects in the Redux store be immutable, which means that their values cannot be modified. Same result as the last time the compound selector was called. It to return the memoized result, each of the basic selectors must return the One basic selector, the resulting compound selector is still memoized. When using Reselect’s createSelector function with more than We need to call the get() method on it and pass in the result of the To extract the current product from that map, Then, as the last parameter, we pass in aįunction that returns the current product from the Immutable.js map of products We call createSelector and pass in the getProducts selector and another Let’s use Reselect to create a selector that returns the current product. The results of the supplied selector (or selectors). The last parameter that createSelector takes is a function to further process Selector functions like the getProducts selector that we looked at earlier. To call the createSelector function, start by passing in one or more basic This, we need to use Reselect’s createSelector function. In addition to adding memoization, we can use Reselect to create selectors thatįind and extract data inside the state tree in more sophisticated ways. When we discuss how to use selectors within our mapStateToProps functions. Memoization helps avoid unnecessary re-renders, as we’ll see later If the function is pure and the inputs don’t change between sequentialĬalls to the function, we don’t have to execute the body of the function more The previous arguments that were passed into it and keeps track of the previous A memoized function has a memory: it keeps track of The Reselect library provides a number of
0 Comments
Leave a Reply. |