Why Fish Redux

1. I have been growing grass for a long time since I was hired by amway

2. To compare the Flutter Redux, learn to appreciate its advantages

3, Participate in and support the domestic Flutter ecology is still in its early stage

The preparatory work

1. Redux.js document

2. Fish Redux documentation

3, Pub uses documentation

Meng Xin (have not contacted Redux) : it is suggested to read it in order, sharpening knives does not cost cutting firewood, solid theoretical basis is very useful

Skilled players (who have used Redux in the Demo) : I recommend looking at the introduction of the Fish Redux documentation and the Components, especially the Components, which are unique

Old driver (used redux. js or Flutter Redux) : Focus on effects, Dependencies, Page, and Adapter in Component

When looking at the documentation, Clone the Fish Redux project, run through the Example and understand the concepts in the documentation.

Important concepts

Of course, the following concepts need to be understood:

Action

Action defines an Action that can carry information and send it to the Store. In other words, Store changes must be triggered by the Action. Fish Redux has the following convention: The Action contains two fields, type and payload. Dart defines a Type enumeration class and an ActionCreator class to help constrain the type of payload.

Reducer/Effect

These two functions are both used to process data. Reducer is a pure function that responds to actions to change Store data. Effect is used to handle intents from the view, such as click events, making asynchronous requests, and other side effects.

Page

Think of it as a container that configures aggregate State, Effect, Reduce, View, Dependencies, and so on

  • There should be only one Store within a page (meaning there should be many stores, as opposed to Flutter Redux)
  • Page inherits from Component, so it can configure all Component elements (meaning more Middleware and initState than Component).
  • Page can be configured to provide Middleware for AOP management of Redux (meaning non-intrusive implementation of common functions such as log printing and performance analysis). Middleware is defined as pluggable, stackable, but does not change the flow of events)
  • Page must be configured with an initState function that initializes Page data.

Adapter (optional)

This is not necessary, but it is really cool, very easy to use, using the same as the old Android formula, the beauty is the effect of the crowd. Have the pursuit can look at the history and principle, of course, and source code.

With these reserves, it’s time to start writing code

Access to the

Create a Flutter project and add dependencies according to the document

2. Create Action, State, Effect, Reducer, View and Page files respectively according to the definition (of course, examples can also be used) and write routine codes.

3. Run the code and observe the effect

Personal experience

1. Centralize, divide and conquer

Fish Redux fully replicates the core concepts of Redux.js. The State is a State tree, fully reflecting [Predictable],[Centralized],[Debuggable] and [Flexible], and the data State is centrally managed by Redux. Divide and conquer is to divide and conquer. A big problem is broken down into several independent small problems to solve, such as the implementation of Effect and the encapsulation of components. A page can be composed of multiple components and effects.

2, the Adapter

Personally, I think this is a very important creation of the Idle Fish team based on real business. Listview can account for more than 50% of the interface of an application, and its experience is very important. It turns out that the Adapter package is very friendly and has excellent performance, which can be clearly compared in the Demo, which is nice.

3, the document

This is understandable, after all, just open source. The current situation is that there are few comments and many modules are not yet available. The document has, but not very specific vivid, friendly, readers do not bring into the easy word to recognize, but read a few times still do not understand its meaning.

The problem

1. Fish Redux resource cost per page per Store?

Observatory observations show that the individual instance references are not large, and the exit page store instance is reclaimed, theoretically with slightly less resources than flutter Redux.

2. Store life cycle: How to maintain some long-term shared data of applications?

CreateStore can be used to create a store for singleton maintenance, see.

In this paper, the source address: https://github.com/hyjfine/flutter_redux_sample/tree/fish-redux-adapter

(after)

@ Zi Luyu, the copyright of this article belongs to Zaihui RESEARCH and development team, welcome to reprint, please reserve the source.