Flutter Redux - Handle navigation to a screen in middleware

Question

In my Flutter Redux app I have an authentication middleware that takes care of user authentication calls to an external authentication service.

If I want to redirect to another screen on certain responses (for example, go to home screen when the login action is successful) - is it recommended to handle that in the middleware or are there other best practice approaches?

Answer 1

I used to use redux in the web and it's recommended to handle navigation in middleware, you can call Navigator.of(context).pushNamed("youRoute") in your middleware or you can use NavigationMiddleware.

Answer 2

Normally, dispatch can fire any action, which including custom syntax, { api: } or { location: }. But in order for the redux to understand these other than { type: }, it might be better handled by redux middleware. For instance, https://github.com/reactjs/react-router-redux

So we can do dispatch(push('/foo')) anywhere, including inside any thunk action, or any action.

I think the order of the middlewares might matter, so that is something to be mindful. Because middlewares are chained one by one, if you want the thunk to react first then maybe router middleware needs to be wired later.