Flutter web overview

Single source of truth: The state of the entire application is stored in a single store which is a tree model Object.

State is read-only: The only way to change the state is to create an action (an object that describes what happens).

Changes are made with pure functions: Use a pure function (Simply calling it a function with no other effects) to get the previous state of the same action, and return the new state.

Flow of an event in redux flutter.

For example: when user presses login button View will receive then Dispatch send an Action, action is sent to Middleware to handle logic + - * : etc… after done middleware send to Reducer, reducer is responsible for updating again Store, store will then get the new results to receive updates for the View.

Demo redux in flutter:

Demo creates an application that makes api calls and displays the results on the screen.

Create the project and add the folders , redux -> action, middleware, reducer.

 

 

Add library in pubspec.yaml

// support using redux in flutter

redux: ">=4.0.0 <5.0.0"

flutter_redux: "^0.7.0"

Use call api

http: ^0.13.1

 

AppState

This class is where the value of app is stored.

 

Action

Create classes Increment Button, UpdateQuoteAction.

 

 

MiddleWare

Create class HomeMiddleWare

 

This class handles the logic of the specific action, in this example handles adding 1 for the counter variable

Reducer

Create class appReducer

 

The class updates the value of state for app.

Store

Create class store

 

 

Initialize the store for the app, initialize the reducers and middleware that will run in the app.

Note: thunkMiddleware is a class of the redux_thunk library.

ViewModel

 

 

This class holds the values and actions corresponding to the view.

View

StoreProvider

Redux provides StoreProvider - This widget will wrap the whole app, get the state of the app allowing to create a store at the root app, connect the store and make it available to child widgets via StoreConnector or StoreBuilder.

Flutter runs on the widget tree, which means it will run from the parent root to the end of the widget tree, so it is necessary to initialize the store at the root level of the app to be able to distribute the state to all the widgets inside.

 

StoreConnector

This Storeconnector widget builds on the Store State.

Before the builder function is run, the converter converts the store into a separate and appropriate viewmodel for the widget to be built.

Every time the store changes, the widget will be rebuilt, and the widget can only be rebuilt when the viewmodel changes.

In fact to run correctly inside the viewmodel it is necessary to add the hasCode, [==], and set distinct == true attributes when initializing the Storeconnector.

 

Redux_thunk

For cases where the action has to handle asynchronous work in flutter redux is more complicated, in this demo it is necessary to call an API and the application must wait until there is a response from the server, if not using redux_thunk, the code will be more cumbersome.

How redux flutter handles an asynchronous action when not using redux_thunk =>

https://github.com/fluttercommunity/redux.dart/blob/master/doc/async.md

 

Redux thunk flutter provides a solution to do the work asynchronously and wait until the result is returned then dispatch an action to the Store.

 

 

ThunkAction

Can be used to delay dispatch of an action or dispatch action when a defined condition is met.

Get into Store, can be used to get the last State.

Dispatched ThunkActions will not go through self-defined middleware.

Flowcode:

Increment flow: View -> HomeViewModel -> HomeMiddleware -> appReducer.

Call api flow: View -> HomeViewModel -> ThunkAction -> appReducer.

Structure Source:

 

 

Note:

Because redux is widely used in many languages, the article is written for reference only, there may be many errors, the article only applies to flutter at the most basic level.

Source code:

https://github.com/wata-corp/pr_web