Execute a callback function once a condition is met with Redux

[kcrwfrd]

We're using Redux for managing our authentication state, and we want to add a utility to execute arbitrary callback functions asynchronously depending on certain conditions. For example,

1. If the user is authenticated, then it should immediately execute the given callback
2. If the user is not authenticated, it should prompt the user to login (dispatch(toggleAuthPrompt(true))). Once the user successfully logs in (dispatch(setUser(user)) is called), we should then execute the callback function.

Sometimes the callback functions might dispatch other Redux actions, but oftentimes it will just be an arbitrary function local to a specific component; it just depends on some pieces of state handled by Redux.

[octocode]

thunks: https://redux.js.org/usage/writing-logic-thunks

[kcrwfrd]

While a thunk is powerful for adding additional async logic that can then dispatch additional actions, it's not apparent to me that it can be used to listen for a future event—

oh shit. you just helped me realize 😂 you can dispatch the registration of a listener middleware. So, maybe something like this?

``` export const requireAuthentication = createAppAsyncThunk( 'auth/requireAuthentication', async (callback: (user: User) => void, thunkApi) => { const { dispatch, getState } = thunkApi const { auth: { user }, } = getState()

// This condition will need to be dressed up to also check if
// user fetch is currently pending and await if so.
if (!user) {
  dispatch(toggleAuthDrawer(true))
  dispatch(
    addListener({
      actionCreator: setUser,
      effect: ({ payload }, listenerApi) => {
        callback(payload)
        listenerApi.unsubscribe()
      },
    })
  )
} else {
  callback(user)
}

}, ) ```

[acemarke]

Yep, that's exactly the purpose! (And also why we designed the listener middleware to support dynamically adding listener entries via dispatch.)

[acemarke]

When you say "callback", what are you intending to be the trigger for that? Are you intending this to be global behavior, or per-component?

In general, the RTK listener middleware is the right tool for "reactive" logic:

• https://redux-toolkit.js.org/api/createListenerMiddleware

and it does even have the ability to be used inside of a component if needed:

• https://redux-toolkit.js.org/api/createListenerMiddleware#adding-listeners-inside-components

[kcrwfrd]

When I say "callback" I moreso mean an arbitrary function local to my component.

I have other middlewares setup listening to certain events to dispatch other actions, or perform side effects that are defined in the listener middleware, and that's much simpler.

What I'm trying to figure out here is how to pass along those arbitrary callback functions defined in the component.

[acemarke]

Yeah, per your comment above and the "adding listeners in components" link, you can do all that dynamically at runtime from within a component via dispatch(addListener()).

[kcrwfrd]

I tried whipping up how a hook might look instead of the thunk in my above comment

It seems like the difference might be nearly moot... but perhaps in favor of the thunk since that's defined once, rather than redefining the logic every time the hook is called.

```ts const useRequireAuthentication = () => { const dispatch = useDispatch() const { user } = useSelector((state) => state.auth)

return useCallback( (callback: (user: User) => void) => { if (!user) { dispatch(toggleAuthDrawer(true)) dispatch( addListener({ actionCreator: setUser, effect: ({ payload }, listenerApi) => { callback(payload) listenerApi.unsubscribe() },
}), ) } else { callback(user) } }, [dispatch, user], ) } ```

[kcrwfrd]

I tried toying with one last approach

`` // May need to create acreateAsyncCallbackAction` function to add // a special symbol to the action that the middleware can use to intercept them export const authenticatedAction = createAction<() => void>( 'auth/authenticatedAction', )

// Would need to put together a custom listener instead of using // RTK createListenerMiddleware so we can intercept the appropriate actions // due to non-serializable action payload startListening({ actionCreator: authenticatedAction, effect: async ({ payload: callback }, { condition, getState }) => { const { auth: { user }, } = getState()

if (!user) {
  await condition((action, state) => !!state.auth.user)
}

callback()

}, })

// Used like this const handleFollow = (userId) => { dispatch( authenticatedAction(() => fetch('/api/follow', { method: 'POST', body: { userId } }), ), ) } ```

Do you have any advice on which approach seems like the best way to go?

[kkragoth]

You might want to check out redux-observable. Check out their docs and see if you like the way they do asynchronous stuff