Reselect: Is it possible to delay a selector?

[makeitrein]

Hey all, interesting edge case I ran into today... I have a requestPathId selector that returns the id of the request in my URL... e.g. for the URL "https://localhost/greenlight/requests/3758", requestPathId is 3758.

requestFromPath uses requestPathId to determine which particular request is being displayed.

The problem is that I would like a nice animation between my request page and my home page, from full opacity to zero opacity, but requestPathId changes immediately upon URL update, causing requestFromPath to return an empty object... empty object means no data renders on the request page while it fades out.

Is there a way I can delay the selector from activating by say 300ms? Or should I use another pattern to solve this?

export const requestFromPath = createSelector(
  requestsNormalized,
  requestPathId,
  (requests, requestPathId) => {
    let request = requests[requestPathId];
    return request || {}
  }
);

Thx,
Jordan

[npbee]

Hey! I don't think you'd be able to do this solely with a selector and, in my opinion, you'd probably want to find a different way to solve this problem. Selectors are meant to be purely derived from your state and component props. Bringing in delay logic to a selector would mean that it now has it's own state to worry about and I could see that getting pretty messy.

One thing you might try is delaying the action that _causes_ the selector to change. So, you'd run your animation and after its complete, dispatch your action that changes the requestPathId which causes your selector to recompute. Another idea might be to have an explicit transitioning state somewhere and use that to determine what to render on the page.

Ultimately, I think you just want your selector be concerned with computing the true state of your app and nothing else.

[makeitrein]

@npbee Thx for the explanation, the explicit transitioning state sounds like a great idea to pursue.

React and the Virtual DOM in general are a pita to get working well with animations, perhaps should have gone with something like VueJS for this project... ce la vie