Question: Why can't we support `createAsyncSelector`? about reselect

[markerikson]

That's actually the problem. A selector is, by definition, 100% synchronous and pure (same as a reducer, actually). It gets called synchronously, is expected to return a value immediately, and that value is based solely on the arguments that were passed in (typically the Redux store state, plus optional parameters).

You can write other async function that are similar (in that they take the state as an argument), but they would no longer be selectors.

Where and how would you expect to use one of these "async selectors"?

[xotahal]

Appreciate very quick response 🙏

We use https://jsonata.org. It's very simple query language that "unfortunately" works async (in a future version). Here is a simplified example:

const asyncSelector = createAsyncSelector(
  (state) => state.a,
  (state) => state.b,
  async (a, b) => {
     const context = { a, b }
     return await jsonataEvaluator("a+b", context)
  }

Then in React world I would do this:

function PrintAsyncSelector() {
   const result = useSelector(asyncSelector)
   
   return <p>{result}</p>
}

function Component() {
   return (
      <Suspense>
         <PrintAsyncSelector />
      </Suspense>
   )
}

The Component is suspended while evaluating asyncSelector. That would mean the useSelector would need to throw promise.

---

Another use case would be in "side effects". If you want to get current and derivated data from the store in callback executed on click.

function Button() {
  const onSubmit = async () => {
     const result = await asyncSelector(store.getState())
     await doRestCallWithCurrentValue(result)
  }
  
  return <Button onClick={onSubmit}>Submit</Button>
}

I know I could do the await jsonataEvaluator("a+b", context) directly in the onSubmit callback, but I'd like to re-use the same code from the selector.

Hope it makes sense.

[markerikson]

Yeah, unfortunately that won't work with Redux. useSelector (and the underlying React useSyncExternalStore hook) do expect standard 100% synchronous selector functions.

What are you actually trying to retrieve with JSONata? is it actual data in the Redux store state?

[xotahal]

Yes, it is data in the Redux store. It is very complex network of createSelector that collects data from redux and then use jsonata to evaluate the expression.

I guess I could do something like this:

function useHook() {
   const [result, setResult] = useState()
   const context = useSelector(collectDataFromRedux)
   
   useEffect(() => {
      setResult(await jsonataEvaluator("a+b", context))
   }, [context])
   
   return result
} 

But that complicates the code and it feels like unnecessary work-around of React's Suspense.

[EskiMojo14]

you could try using the suspense util library for it?

[markerikson]

Part of the issue is it seems like the entire state is needed as an argument. Normally to get that you'd have to use useSelector(state => state), which would force a re-render 100% of the time and is bad.

[xotahal]

Sorry, maybe it is just a lack of knowledge about all these libraries. But if I am not wrong there is no problem of making createSelector work async, right? We can discuss what exactly pure function means and how strict we need to be about it but for the sake of conversation let's say that the following would still be pure action.

We use await/async and the jsonata (in our case) evaluates the same inputs to the same outputs without any side effects, I think we can consider such a function as pure.

The problem is the connection between React and Redux, where useSelector doesn't wait for the reselect's selector to be done. But that shouldn't be a problem to support with a few adjustments, right?

I put together this code sandbox that might better illustrate what I mean - https://codesandbox.io/p/sandbox/use-external-storage-forked-yflsy3

Please let me know if I am missing something