use-async-selector
Why
We had to do heavy calculations in our redux selectors and wanted to put them in a web worker. But useSelector() was not made for async stuff. That is why we needed a hook, that was able to handle async operations with access to the redux store. Now we can do all the heavy calculations within web workers.
Installation
npm i use-async-selector
Usage
; const myAsyncSelector = async ; const MyComponent = { const loading error data = ; // do stuff ...}
Function Signature
useAsyncSelector(func: function): Object
Params
Param | Type | Description |
---|---|---|
func | function | Function, that needs to return a promise |
Result
Property | Type | Description |
---|---|---|
loading | boolean | True, if promise is not resolved yet |
error | boolean | True, if promise is rejected |
data | null | mixed | Holds resolved data, if promised resolved. |
Setup
To demonstrate its power, we are using the workerize-loader webpack plugin. But all other async stuff will work too.
1. Create a redux store
app.js
; const defaultState = items: 2 3 4 5; const reducer = state;const store = ; const App = { return <Provider store=store> <MyComponent /> </Provider> ;};
2. Create an async function
In our case, it is an exported worker function, that returns a promise.
worker.js
// put your heavy stuff hereconst selectItems = stateitems;
3. Use the redux state within an async selector
my-component.js
;; // create a worker instanceconst instance = ; const MyComponent = { const loading error data = ; if loading || error return null; // do stuff with the data console;};