async-selector
Advanced tools
Comparing version 1.0.8 to 1.0.9
@@ -332,3 +332,3 @@ import createAsyncSelector from '../src/index'; | ||
const throttle = f => _.throttle(f, 200); | ||
const onResolve = (val) => {console.log(val); c += 1;}; | ||
const onResolve = (val) => {c += 1;}; | ||
const employees = createAsyncSelector({...params, onResolve, throttle}, state => state.text); | ||
@@ -680,3 +680,2 @@ employees({text: 'a'}); | ||
const result = ages(n); | ||
console.log(result); | ||
try { | ||
@@ -739,1 +738,57 @@ expect(deepEqual(expected, result)).toBe(true); | ||
}); | ||
test('cancel result', () => { | ||
let state = {employees: ['Mark Metzger'], maxAge: 10}; | ||
let result = null | ||
const onCancel = (promise, n, a) => {result=[n,a]} | ||
const ages = createAsyncSelector( | ||
{...params2, onCancel }, | ||
s => s.employees, | ||
s => s.maxAge); | ||
ages(state); | ||
ages({employees: ['Mark Metzger'], maxAge: 11}); | ||
expect(deepEqual(result, [['Mark Metzger'], 10])).toBe(true); | ||
}); | ||
test('resolve result', done => { | ||
let state = {employees: ['Mark Metzger'], maxAge: 10}; | ||
let result = null | ||
const onResolve = (r, n, a) => {result=[r,n,a]} | ||
const ages = createAsyncSelector( | ||
{...params2, onResolve }, | ||
s => s.employees, | ||
s => s.maxAge); | ||
ages(state); | ||
ages(state); | ||
setTimeout(() => { | ||
try { | ||
expect(deepEqual(result, [[], ['Mark Metzger'], 10])).toBe(true); | ||
} catch (e) { | ||
done.fail(e) | ||
} | ||
done(); | ||
}, 200); | ||
}); | ||
test('reject result', done => { | ||
let state = {employees: ['Mark Metzger'], maxAge: 1}; | ||
let result = null | ||
const onReject = (r, n, a) => {result=[r,n,a]} | ||
const ages = createAsyncSelector( | ||
{...params2, onReject }, | ||
s => s.employees, | ||
s => s.maxAge); | ||
ages(state); | ||
ages(state); | ||
setTimeout(() => { | ||
try { | ||
expect(deepEqual(result, ['too young', ['Mark Metzger'], 1])).toBe(true); | ||
} catch (e) { | ||
done.fail(e) | ||
} | ||
done(); | ||
}, 200); | ||
}); |
@@ -82,5 +82,3 @@ 'use strict'; | ||
var changed = forceUpdate || hasChanged(oldInputs, mapped); | ||
//console.log(changed, mapped, internal) | ||
if (changed) { | ||
/* Handle throttling / debouncing if required */ | ||
@@ -112,3 +110,2 @@ if (throttle !== null && f === null) { | ||
promise.then(function (promiseResolution) { | ||
//console.log('resolution', promiseResolution, hasChanged(oldInputs, mapped)) | ||
if (!hasChanged(oldInputs, mapped)) { | ||
@@ -115,0 +112,0 @@ previousResolution = promiseResolution; |
{ | ||
"name": "async-selector", | ||
"version": "1.0.8", | ||
"version": "1.0.9", | ||
"description": "Select values from databases using asynchronous selectors.", | ||
@@ -5,0 +5,0 @@ "main": "./dist/index.js", |
@@ -149,2 +149,9 @@ A simple, lightweight library inspired by [reselect](https://github.com/reduxjs/reselect) which allows you select data out of a remote database almost as easily as you would from local state. This library will normally be used in conjunction with redux and reselect but it has no dependencies. | ||
### Avoiding over-rendering | ||
A useful feature of using an async selector is that every time a new set of inputs are used, it immediately returns a default value. This avoids the dangerous bug of having data show up that looks correct while the promise is waiting to be resolved. However, in some cases flipping between a default value and a resolved value is undesirable. For example, if the user is typing and the search suggestions are constantly appearing and disappearing, it could be jarring. The simple solution is to use ".previous" instead ".value". "previous" is initially undefined, but otherwise it is the result of the most recent promise resolution. | ||
```js | ||
const searchResults = createAsyncSelector(params, searchText); | ||
console.log('results:', searchResults(store.getState()).previous || []) | ||
// previous === value when isResolved is true. | ||
``` | ||
@@ -151,0 +158,0 @@ # Documentation |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
143150
915
220