This is the 28th day of my participation in the August Challenge

preface

We have spent seven articles on the application and features of Redux for Flutter. This article concludes the series and then we move on to other state management plug-ins.

The basic elements of Redux

ReduxThere are four basic elements of:Store.Action.ReducerandView, the direct data flow of the four elements is one-way, as shown in the figure below:

  • StorestorageViewRequired status data;
  • ViewDispatches when a user interaction event is receivedAction;
  • ActionWill be passed toReducer,ReducerAccording to theActionProcess the corresponding business and return the new status data.
  • New status data passesStoreDrive the viewViewUpdate.

For a basic introduction to and examples of Redux, see How Flutter shares React Redux state management. Since Redux was born in React, look for the Predictable State Container for JS Apps on Redux’s official website.

The middleware

In some cases, we’re dealing withActionMiddleware can be used when pre-processing or asynchronous processing is required. Middleware is simply the concept of interceptors. With middleware,ReduxThe data flow becomes the following:In middleware, new ones can be initiatedAction(for example, after obtaining new state data), or you can do nothing (for example, just make an unacknowledged back-end request, or just store offline data). Read the following chapter about middleware:

  • Introduction to Flutter (59) : A hand-held guide to asynchronous state management using Redux’s middleware
  • Introduction to Flutter: Redux uses middleware to store shopping lists offline

Middleware code optimization

The easiest way to write middleware is to use a different if… Else, but if there are too many actions, it will cause if… Else too many or even nested, the code is difficult to maintain. At this point, you can use TypedMiddleware to bind middleware methods to corresponding actions, eliminating the need to use if… Else For Action type determination, enhance code maintainability. To demonstrate the use of TypedMiddleware, we developed a general shopping cart addition and subtraction component: Introduction to Flutter & Combat (62) : A general shopping cart addition and subtraction component was developed.

Multi-component state sharing

Similar to Provider, if multiple components share a Redux Store object, they need to be in a child component under StoreProvider. For globally shared Store data (such as logged-in user information), StoreProvider can be placed in a top-level application. We describe how Store state can be shared by multiple components using the shopping list application: Introduction to Flutter: Redux’s state can be shared by multiple components using the shopping list as an example. Of course, for performance reasons, use partial stores as soon as you don’t have to.

Performance optimization

In actual testing, StoreConnector only refreshes its child components, not Store’s, when the state changes. This leads us to a principle of performance optimization — keep the range of components covered by StoreConnector as small as possible to avoid excessive component refreshes and thus improve performance. We have also analyzed why this effect can be achieved from the source point of view: Introduction to Flutter and Actual Combat (64) : This article is very long, for the sake of performance, you have to hold on — look at the source code for flutter_redux accurate refresh.

For the top Store, just as we got started with the Fight on Flutter (63) : Top stores can cause a global refresh, so it’s best to set the DISTINCT attribute to true and implement the == and hashCode methods of the Store state object class. This avoids a global component refresh every time an Action is triggered. Setting the DISTINCT attribute to True, as mentioned earlier, and implementing the == and hashCode methods of the Store state object class also improves performance by avoiding unnecessary global flushing.

conclusion

Redux makes code written in Redux more formal and easier to understand because of the one-way data flow mechanism and the way the elements work together. Therefore, it is more suitable for medium and large applications. The encapsulation of Flutter_redux greatly simplifies the use of Redux in Flutter. There is more to Redux than that. Read the source code and official documentation to learn more about Redux’s applications and features.

This is a column about the entry and practice of Flutter. The corresponding source code is here: Entry and Practice of Flutter.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!