Redux actions triggered by selectors

Question

I'm having a hard time implementing Redux in a quiet large website.

I have components connected to the store using the useSelector API I use Reselect to write selectors.

The thing is I don't know where to trigger the bootstrap actions of a page for example.

I have a container made of stateless components, that only takes props and displays them. In the container, one could trigger all the actions to fetch data from an API. (using redux-thunk) The main issue is that the devs should list the actions to be triggered in order to display the page.

But I was wondering if I could just trigger the right action when trying to select data from the store:

export function getComment(state, id) {

  const comments = state.comments;

  if (comments[id]) {
    return comments[id];
  }

  store.dispatch(CommentActions.getComment(id));
  return undefined;
}

The components here just "hook" themselves to data in the store. If the data is already there, it is returned, otherwise the trigger the action that calls the API and returns undefined.

My main interrogation is whether or not this approach is an anti-pattern, i.e. selectors are not pure functions because they trigger side-effects, etc.

We have a least two re-renders, one with an undefined, and an other one when the API responds.

Thanks in advance!

Answer 1

Dispatching inside reselect is not discussed in Redux official documentation, so it should not be considered good solution.

But there are solutions that very close to what you want to achieve. For example redux-async-loader or using React.Lazy with Redux.

General idea of both approaches is to move data fetching to connect function (where reselect lives). In this term, both approaches are very close to what you trying to achieve with dispatching in reselect.

1. Redux-async-loader from my point of view is a bit simpler. It creates higher order component which wraps around connect.

2. React.Lazy does essentially the same. In addition you can use Suspense component to temporary display "data loading..." when you wait for data.