fish_redux 全局状态管理

基本与现存网络上一致，在上面的基础上改了一点点，主要是在extends和implements那块

1. 新建Store文件夹，并新建store.dart,state.dart,reducer.dart,action.dart文件

• store.dart文件

import 'package:fish_redux/fish_redux.dart';

import 'state.dart';
import 'reducer.dart';

class GlobalStore {
  static Store<GlobalState>? _globalStore;
  static Store<GlobalState> get store => _globalStore ??= createStore(GlobalState(), buildReducer());
}

• state.dart文件

// import 'dart:ui';

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

abstract class GlobalBaseState {
  Color themeColor = Colors.white ; // 这个不重要，可以随意设置，主要是这里不设置就出现非空提示。。。
}

class GlobalState implements Cloneable<GlobalState>,GlobalBaseState {

  @override
  Color themeColor = Colors.red; // 这个是该app默认的主题色，按照实际设置

  @override
  GlobalState clone() {
    // TODO: implement clone
    return GlobalState()..themeColor = themeColor;
  }

  // @override
  // late Color themeColor;
}

• reducer.dart文件

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

import 'state.dart';
import 'action.dart';
Reducer<GlobalState> buildReducer() {
  return asReducer(
    <Object,Reducer<GlobalState>> {
      GlobalAction.changeThemeColor: _onChangeThemeColor
    }
  );
}

List<Color> _colors = <Color>[
  Colors.green,
  Colors.red,
  Colors.black,
  Colors.blue
];

GlobalState _onChangeThemeColor(GlobalState state,Action action) {
  final Color next = _colors[((_colors.indexOf(state.themeColor) + 1) % _colors.length)];
  // GlobalBaseState
  return state.clone()..themeColor = next;
}

• action.dart文件

import 'package:fish_redux/fish_redux.dart';

enum GlobalAction { changeThemeColor }

class GlobalActionCreator {
  static Action onChangeThemeColor() {
    return const Action(GlobalAction.changeThemeColor);
  }
}

2. 在main.dart中PageRoutes中新增visitor配置

// 只有特定范围的Page(state继承了全局状态)，才需要建立和AppStore的连接关系
    visitor: (String path,Page<Object,dynamic> page) {
      if(page.isTypeof<GlobalBaseState>()) {
        page.connectExtraStore<GlobalState>(GlobalStore.store, _updateState);
      }
    },

_updateState函数

// 全局状态更新
  _updateState(Object pageState,GlobalState appState) {
      if(pageState is Cloneable) {
        final Object copy = pageState.clone();
        final GlobalBaseState newState = copy as GlobalBaseState;
        final GlobalBaseState p = pageState as GlobalBaseState;
        if(p.themeColor != appState.themeColor) {
          newState.themeColor = appState.themeColor;
        }
        return newState;
      }
      return pageState;
  }

3. 在新建的页面模块state中

这里的..themeColor = themeColor是必须的，否则会当页面操作一个dispatch后 主题色会变为默认的颜色（就是我最开始说的无所谓的哪个Colors.White）

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter_reading/Store/state.dart';

/**
 * 定义我们在页面上展示的一些变量，initState可以初始化变量；clone方法的赋值写法是必须的
 */
class CountState extends GlobalBaseState implements Cloneable<CountState> {
  int count = 0;

  @override
  CountState clone() {
    return CountState()..count = count
    ..themeColor = themeColor; // 这里的..themeColor = themeColor是必须的，否则会当页面操作一个dispatch后 主题色会变为默认的颜色（就是我最开始说的无所谓的哪个Colors.White）
  }
}

CountState initState(Map<String, dynamic> args) {
  return CountState()..count = 0;
}

4. 按钮触发

ElevatedButton(onPressed: () {
            GlobalStore.store.dispatch(GlobalActionCreator.onChangeThemeColor());
          }, child: const Text("changeTheme"))

完成