This article is suitable for students who are already introduced to Flutter and have no knowledge of Redux, but are interested in fish-Redux.

Fish-Redux Developing flutter (PART 1)

1 Fish story is introduced

As you know, ReDUx is a front-end state management framework.

Fish-redux is the Flutter application framework developed by Ali Xianyu team. According to the official documentation, “Fish Redux is an assembled Flutter application framework based on Redux data management, which is especially suitable for building large and complex applications.”

1.1 Fish-Redux components

As a white guy with no front-end experience, fish-Redux was initially confused by various concepts, so let’s take a look.

page

Page represents a page, inherited from Component. It consists of view (widgets that present the UI), State, Reducer, Effect, and so on

state

State is used to store the page/ Component state, i.e. store data.

action

Action is the intent we define. When we need to process some action or event, we dispatch a specific action and let the recipient of the action handle it.

Action contains two fields:

  • Type: Indicates the action type
  • Payload: Action Specifies the payload

reducer

Reducer is a reducer that receives an intention and makes changes to the data, that is, update the state.

effect

Effect is used similarly to reducer, but with different responsibilities. He deals with “side effects,” the concept of functional programming. It is simply understood that Reducer is responsible for state updates and Effect is responsible for anything other than state updates.

store

Store maintains a global state, and an application has only a single store.

1.2 Fish-Redux Flow chart

Fish_redux_flow.jpg is simply drawn according to my personal understanding

2 introduction of Fish – story

2.1 Creating a Project

Start by creating a Flutter project called fish_demo

This is the default project that was created

2.2 introduction of fish – story

Open pubspec.yaml and add fish_redux: ^0.2.7 to dependencies. Click Packages Get. Introduction of fish – story

3 Installing plug-ins

We have provided a plugin that makes it easy to use Fish-Redux, simplifying the process of file creation. The plugin is called FishReduxTemplate

Plug-in installed successfully:

4 Create the root Widget for the application

Dart creates the app’s root Widget. We define a createApp() method to initialize the app information, including the title, topic, and page route. App. The dart is as follows


import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

Widget createApp() {
  final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object.dynamic> > {});return MaterialApp(
    title: 'FishDemo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute<Object>(builder: (BuildContext context) {
        returnroutes.buildPage(settings.name, settings.arguments); }); }); }Copy the code

Then modify the default main.dart to run our app. The main dart as follows

import 'package:flutter/material.dart';
import 'app.dart';

void main() => runApp(createApp());

Copy the code

The first fish-Redux page

First, create a package named “entrance”, representing the application entrance interface.

Right click on the computer entrance —-> New —-> FishReduxTemplate.

Dart shows the structure of a Page. Page. The dart is as follows

import 'package:fish_redux/fish_redux.dart';
import 'effect.dart';
import 'reducer.dart';
import 'state.dart';
import 'view.dart';

class EntrancePage extends Page<EntranceState.Map<String.dynamic>> {
  EntrancePage()
      : super(
            initState: initState,
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies<EntranceState>(
                adapter: null,
                slots: <String, Dependent<EntranceState>>{
                }),
            middleware: <Middleware<EntranceState>>[
            ],);

}

Copy the code

Dart is responsible for the view part of the Entrance page. We modified it and added a button. Dart is modified as follows.

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'action.dart';
import 'state.dart';

Widget buildView(EntranceState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.blue,
      title: Text('Entry page'),
    ),
    body: Container(
      child: Center(
        child: RaisedButton(
          padding: EdgeInsets.fromLTRB(40.0.40.0),
          color: Colors.green,
          child: Text(
            "Enter",
            style: TextStyle(color: Colors.white),
          ),
          onPressed: () {
            //todo click events}),),),); }Copy the code

Finally, we configure the Entrance page into the global page route of APP and set it as the default home page of APP. Open app.dart :(comment two lines of the tag)


import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';

import 'entrance/page.dart';

Widget createApp() {
  final AbstractRoutes routes = PageRoutes(
    pages: <String, Page<Object.dynamic> > {'entrance_page': EntrancePage(),  // Add the page here});return MaterialApp(
    title: 'FishDemo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: routes.buildPage('entrance_page'.null),  // make it the default page
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute<Object>(builder: (BuildContext context) {
        returnroutes.buildPage(settings.name, settings.arguments); }); }); }Copy the code

Run as follows

Learn more about the use of fish-Redux in the next article.

🤗 If my content is helpful to you, welcome to like, comment, forward, favorites.