1. What is a selector?
Before we can understand what reselect
works, we must first understand what a selector
is. selector
can be understood as a logical segment used to calculate a certain value from available values, or simply to take a value from an existing value.
In a React application that uses Redux, we can write our own selector
to get or calculate a value from the values in the redux store
to reuse them in the mapStateToProps
function. For example:
1 2 3 4 5 6 | <span class="token comment">// *** selector dùng để lấy property 'users' từ store của redux</span> <span class="token keyword">const</span> <span class="token function-variable function">getUsers</span> <span class="token operator">=</span> state <span class="token operator">=></span> state <span class="token punctuation">.</span> users <span class="token punctuation">;</span> <span class="token comment">// *** selector dùng để tính toán một giá trị dựa trên property 'users' của store</span> <span class="token keyword">const</span> <span class="token function-variable function">getUserViaId</span> <span class="token operator">=</span> <span class="token punctuation">(</span> state <span class="token punctuation">,</span> id <span class="token punctuation">)</span> <span class="token operator">=></span> state <span class="token punctuation">.</span> users <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> user <span class="token punctuation">.</span> id <span class="token operator">===</span> id <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
However, whenever users
are update
, getUserViaId
and getUser
will have to recalculate. This is the problem of simple selector
, when users
become bigger, or the calculations inside getUserViaId
more complicated, consume more resources and as a result our app will be … slower. . This is where the Reselect
library shines.
2. How does the reselector library work?
The reselector is simply a library that helps us solve the above problem by comparing the parameters of a selector
(created by the reselect library) with each other, that selector
will only perform calculations if the parameters The old is khác
from the new parameter.
reselector is just a javascript library so you can use it with any javascript framework or library, not just react.
3. How to use the reselector library
The README file in the repo of github reselector library is really quality, easy to read, clear and very easy to understand, so I’ll just show you how to use the basic of this letter.
OKay, To create a Selector
using the reselector library, we will have to:
- Create a …
selector
, thisselector
gets into a store of redux and returns a value, what is this value for? Please read the steps below and see VD to understand better. createSelector
selector
into thecreateSelector
method of the reselector to create a newselector
. This method takes aselector
or an array ofselector
and finally a callback function, this callback function takes the parameter that theselector
we pass intocreateSelector
and operates as we wrote in item 2 . For example:
1. File to create selector:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> <span class="token punctuation">{</span> createSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'reselect'</span> <span class="token comment">// *** đây là 'selector' của mình</span> <span class="token keyword">const</span> <span class="token function-variable function">selectGetUsers</span> <span class="token operator">=</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token operator">=></span> state <span class="token punctuation">.</span> users <span class="token comment">// *** function sẽ là một 'selector' thay thế cho 'selector' selectGetUsers</span> <span class="token keyword">export</span> <span class="token keyword">const</span> getUsersSelector <span class="token operator">=</span> <span class="token function">createSelector</span> <span class="token punctuation">(</span> <span class="token comment">// *** chuyền 'selector' ở trên vào method 'createSelector'</span> selectGetUsers <span class="token punctuation">,</span> <span class="token comment">// *** callback function hoạt động với cơ chế hoạt động</span> <span class="token comment">// như mình giới thiệu ở trên thay cho 'selector' selectGetUsers</span> users <span class="token operator">=></span> users <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
2. Use the selector:
1 2 3 4 5 6 7 8 | <span class="token operator">...</span> <span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> state <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> getUsers <span class="token punctuation">:</span> <span class="token function">getUsersSelector</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">...</span> |
As I mentioned in step 2 , the first parameter of createSelector
can also be an array of selector
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">import</span> <span class="token punctuation">{</span> createSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'reselect'</span> <span class="token comment">// *** đây là 'selector' của mình</span> <span class="token keyword">const</span> <span class="token function-variable function">selectGetUsersOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token operator">=></span> state <span class="token punctuation">.</span> getUsersOptions <span class="token keyword">const</span> <span class="token function-variable function">selectGetUsers</span> <span class="token operator">=</span> <span class="token punctuation">(</span> state <span class="token punctuation">)</span> <span class="token operator">=></span> state <span class="token punctuation">.</span> users <span class="token comment">// *** function sẽ là một 'selector' thay thế cho 'selector' selectGetUsers</span> <span class="token keyword">export</span> <span class="token keyword">const</span> getUsersSelector <span class="token operator">=</span> <span class="token function">createSelector</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> selectGetUsersOptions <span class="token punctuation">,</span> selectGetUsers <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> getUsersOptions <span class="token punctuation">,</span> users <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span> getUsersOptions <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'adult'</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> users <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> user <span class="token punctuation">.</span> age <span class="token operator">></span> <span class="token number">19</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'teenagers'</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> users <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> user <span class="token operator">=></span> user <span class="token punctuation">.</span> age <span class="token operator">></span> <span class="token number">12</span> <span class="token operator">&&</span> user <span class="token punctuation">.</span> age <span class="token operator"><</span> <span class="token number">19</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">default</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> users <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
One more thing, as I mentioned, reselect is just a javascript library so you can use it with frameworks or pure javascript libraries or javascript too!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">const</span> <span class="token punctuation">{</span> createSelector <span class="token punctuation">}</span> <span class="token operator">=</span> Reselect <span class="token punctuation">;</span> <span class="token keyword">let</span> exampleState <span class="token operator">=</span> <span class="token punctuation">{</span> getUsersOptions <span class="token punctuation">:</span> <span class="token string">'all'</span> <span class="token punctuation">,</span> users <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">12</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'b'</span> <span class="token punctuation">,</span> value <span class="token punctuation">:</span> <span class="token number">19</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">selectUsers</span> <span class="token operator">=</span> state <span class="token operator">=></span> state <span class="token punctuation">.</span> users <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">selectGetUsersOptions</span> <span class="token operator">=</span> state <span class="token operator">=></span> state <span class="token punctuation">.</span> getUsersOptions <span class="token punctuation">;</span> <span class="token keyword">const</span> getStateSelector <span class="token operator">=</span> <span class="token function">createSelector</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> selectUsers <span class="token punctuation">,</span> selectGetUsersOptions <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> users <span class="token punctuation">,</span> getUsersOptions <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> users <span class="token punctuation">,</span> getUsersOptions <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token function">getStateSelector</span> <span class="token punctuation">(</span> exampleState <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
4. Conclusion
Above are some things that I would like to introduce to you about the reselect library. I hope that through this article, you just learn about react and redux will know more about reselect and the reason behind the popularity of this library.