Flutter数据管理flutter_redux详解

2020-02-25 本文已影响0人小小的开发人员

Flux

Redux是Flux思想的另一种实现方式。Flux是和React同时面世的。React用来替代jQuery，Flux用来替换Backbone.js等MVC框架。在MVC的世界里，React相当于V(view)的部分，只涉及页面的渲染。一旦涉及应用的数据管理部分，还是交给Model和Controller。不过，Flux并不是一个MVC框架，它用一种新的思路来管理数据。

MVC

MVC是业界广泛接受的一种前端应用框架类型，这种框架把应用分为三个部分：
　　Model(模型) 负责管理数据，大部分业务逻辑应该放在Model中。
　　View(视图) 负责渲染用户页面，应该避免在View中涉及业务逻辑。
　　Controller(控制器) 负责接受用户输入，根据用户输入调用相应的Model部分逻辑，把产生的数据结果交给View部分，让View渲染出必要的输出。
　　MVC框架提出的数据流很理想，用户请求先到达Controller，由Controller调用Model获得数据，然后把数据交给View。但是，在实际框架实现中，总是允许View和Model直接通信。

Flux

Facebook用Flux框架来替代原有的MVC框架，这种框架包含四个部分：
　　Dispatcher 负责动作分发，维持Store之间的依赖关系
　　Store 负责存储数据和处理数据相关逻辑
　　Action 驱动Dispatcher的javascript对象
　　View 视图负责显示用户界面

如果非要把Flux和MVC做一个对比。那么，Flux的Dispatcher相当于MVC的Controller，Flux的store相当于MVC的model，Flux的View对应于MVC的View，Action对应给MVC框架的用户请求。

【优势】
　　在Flux中，Store只有get方法，没有set方法，根本不可能直接去修改其内部状态，View只能通过get方法获取Store的状态，无法直接去修改状态，如果View想要修改Store的状态，只能派发一个action对象给Dispatcher。

【不足】
　　1、Store之间依赖关系
　　在Flux的体系中，如果两个Store之间有逻辑依赖关系，就必须用上Dispatcher的waitFor函数。
　　2、难以进行服务器端渲染
　　3、Store混杂了逻辑和状态

Redux

Redux的含义是Reducer+Flux。Reducer是一个计算机科学中的通用概念。以Javascript为例，数组类型有reduce函数，接受的参数是一个reducer，reducer做的事情就是把数组所有元素依次做规约，对每个元素都调用一次参数reducer，通过reducer函数完成规约所有元素的功能。

Flux的基本原则是单向数据流，Redux在此基础上强调三个基本原则：
1、唯一数据源
2、保持状态只读
3、数据改变只通过纯函数完成

redux专注于状态管理，如果你的应用有以下场景，可以考虑使用 Redux。

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

核心概念包括：store、state、action、reducer。

flutter_redux

flutter_redux实现了redux在flutter中的应用。

安装

redux: ^3.0.0
flutter_redux: ^0.5.3

创建state

/// user 全局共享数据模型
class UserState {
  String nickname;
  String age;
  String birthday;

  UserState({
    this.nickname,
    this.age,
    this.birthday,
  });

  // state初始化
  factory UserState.initial() => UserState(
      nickname: '',
      age:  '',
      birthday:  '';

  @override
  String toString() {
    return "nickname: $nickname, age: $age, birthday: $birthday}";
  }
}

创建action

/// user动作
enum UserAction {
  // 拉取prfile数据
  FETCH_PROFILE,
  FETCH_PROFILE_SUCCESS,
  FETCH_PROFILE_FAIL,
}

创建reducer

import '../models/userState.dart';
import '../constants/user.dart';

/// 用户reducer
UserState userReducer(UserState prevState, action) {
  UserState _userState;
  switch (action['type']) {
    case UserAction.FETCH_PROFILE_SUCCESS:
      Map _data = action['data'];
      _userState = UserState(
        nickname: _data['nickname'],
        age: _data['age'],
        birthday: _data['birthday'],
      );
      break;
    default:
      _userState = prevState;
      break;
  }
  return _userState;
}

创建store

import 'package:redux/redux.dart'

void main() {
  Store store = new Store<UserState>(userReducer,
          initialState: UserState.initial(), middleware: [apiMiddleware]);
  runApp(MyApp(store));
}

store与根Widget关联

import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

// MyApp
  @override
  Widget build(BuildContext context) {
    return StoreProvider<UserState>(
        store: store,
        child: MaterialApp(
            title: Config.APP_NAME,
            showPerformanceOverlay: false,
            debugShowCheckedModeBanner: false,
            home: HomePage()
            ));
  }

store与其他Widget关联

import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

// HomePage
 @override
  Widget build(BuildContext context) {
    return StoreConnector<UserState, UserState>(
        onWillChange: _onReduxChange,
        onInitialBuild: _afterBuild,
        converter: (store) => store.state,
        builder: (context, userState) {
          return Scaffold(
            body: _renderBody(userState),
          );
        });
  }
  /// redux中state发生变化，会触发该方法
  void _onReduxChange(UserState userState) {}

  /// 执行build后的一次性初始化
  void _afterBuild(UserState userState) {}

StoreConnector主要是起一个数据转化的作用，可以在组件赋值之前做一些数据转化操作。
StoreConnector有两个泛型参数，第一个是我们的原本的共享类型，第二个是我们需要转换的参数类型，它可以是类，方法，基本数据类型等都可以.
需要申明两个方法：

converter 起数据转化作用，返回值会直接传递到builder方法的第二个参数中去。
builder 接收数据，构建Widget交互，第二个参数就是我们申明的转化参数的返回值，返回值类型视传入的泛型类型而定。

通过dispatch改变store

Map action = {
'types': UserAction.FETCH_PROFILE,
'data':  {
        'nickname': 'mike',
        'age': 22,
        'birthday': '1995-09-01'
      }
}
 store.dispatch(action);

中间件middlewares
redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。

import 'package:redux/redux.dart';

import '../models/userState.dart';
import '../configs/config.dart';

/// action日志中间件
loggerMiddleware(Store<UserState> store, action, NextDispatcher next) {
  if (Config.env != Env.PROD) {
    print('logger dispatch action => ${new DateTime.now()}: $action');
  }
  next(action);
}

Flutter数据管理flutter_redux详解

Flux

MVC

Flux

Redux

flutter_redux

猜你喜欢

热点阅读