This article assumes that you’ve either recently got acquainted with how Redux can be utilized in a Flutter project or you’re on this way. If you don’t have enough confidence in Redux terms, I’d suggest reading the docs in redux.dart and flutter_redux repositories.
As soon I learned the basic samples of Flutter + Redux and started applying the concepts to a simple app I realized that such operation as “displaying a SnackBar notification” was not obvious to implement in Redux flow.
Execution of such one-off operations is relatively hard in Redux as you only get to observe “current state”, meaning an action must somehow emit a state for “start_displaying_toast” and “stop_displaying_toast” to have the effect akin to calling
Let’s create an app that loads a random famous quote from some API and displays it. The app will display a quote and a button to get a new quote. During the process of getting the data a loading indicator should be shown and, if any error occurs in the meantime, a toast notification describing the error should arise.
This is a small class that is used to hold a quote’s data.
In Redux, all the application state is stored as a single object. It’s a good idea to think of its shape before writing any code.
For this app we need to store three different pieces:
- The quote that is currently displayed.
- The flag indicating that the data is being loaded and that the progress indicator needs to be shown.
- The error which has occurred and is used to display a toast notification with the corresponding message.
Please note that
AppState is an immutable object. Every time you need to change a state you use the
copyWith method which returns a modified copy of the state. The state lives at the top of your Widget hierarchy within a
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using
This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for.
LoadQuoteAction is used to trigger the loading process,
QuoteLoadedAction delivers the notion of the finished process and the quote itself,
ErrorOccurredAction is an indicator of an error and
ErrorHandledAction is used as a trigger to transform the app’s state back to its usual form.
Actions describe the fact that something has happened, but don’t specify how the application’s state changes in response. This is the job of reducers. The reducer is a pure function that takes the previous state and an action, and returns a new state.
The reducers have to stay pure. You should never mutate the arguments inside a reducer or perform side effect operations like API or database calls. This is the job for Middleware.
Middleware are special functions that run before your dispatched actions reach your reducer. They can be used to listen for different actions and perform async calls, such as talking to a web server. Once they get a response from the web server, they can dispatch our “success” or “failure“ actions.
Take a look at the
HomeScreen widget that I came up with. This is not a pure “Presentation” widget. This is a combination of the so-called “StoreConnector” and “Presentation” widgets. This
HomeScreen widget is responsible both for converting the latest
AppState to a
_ViewModel and displaying UI in accordance with the current state.
Let’s take a closer look at line 20 in the code above.
ErrorNotifier is the piece of logic of particular interest here.
ErrorNotifieris a receiver widget. Essentially it is a widget that doesn’t display anything, but is set up to react to changes in the store to do something within the build tree. You wrap your receiver around your
body:property on all your scaffolds and you'll be able to receive your SnackBar messages from anywhere you can dispatch an action. The only downside is the use of temporary data in your store.
So, as you can see
ErrorNotifier tracks the updates of
store.state.error and shows a
SnackBar when there is an error. Also, note that it dispatches
ErrorHandledAction before showing the toast notification, which will be handled by the corresponding reducer to clean the error from the
And here is
main.dart file which combines all the components described above.
Play the video to see how the app looks like.
Feel free to grab to the source code of the app and give it a try.