Руководство по использованию Fish Redux Global Store-AppRoute

Прежде чем научиться использовать AppRoute, сначала разберитесь в этих вопросах, чтобы определить, нужно ли вам это.

Почему Redux.js и Vuex являются глобальным магазином?

Интерфейсные одностраничные приложения становятся все более и более сложными. Изменение модели повлечет за собой изменение другой модели, что также может привести к изменению представления. Три принципа Redux позволяют прогнозировать изменения состояния. Первый из них — единый источник данных, в котором воплощена идея централизации. Приложение поддерживает дерево состояний, а изменения данных приводят к обновлению представления. Единое дерево состояний более удобно для управления данными. Поскольку жизненный цикл соответствует приложению, данные между компонентами также удобнее передавать и совместно использовать (например, информацию для входа).
Почему Fish Redux не такой?

Fish Redux поддерживает Stroe на уровне страницы только в начале, что является объективным требованием бизнеса. В качестве нового стека технологий Flutter используется в приложении Xianyu с сотнями миллионов пользователей. Он требует контроля рисков и изоляции. Он может только сначала переписать некоторые страницы, итеративно проверять и улучшать, а затем постепенно заменять его.
Нужно ли использовать AppRoute?

Если ваши требования такие же, как у Сяньюй, вы выбрали трудный путь, требующий долгой борьбы между концентрацией и разделением. Рекомендуется использовать HybridRoute, чтобы сэкономить время и облегчить последующее преобразование. В противном случае используйте AppRoute, чтобы в полной мере насладиться преимуществами Flutter и Redux.

дизайн-мышление

Автор добавил уровень маршрута, основная функция которого заключается в создании страницы, соответствующей различным сценариям, и реализации трех конкретных маршрутов XXXRoute.

/// Route 抽象类，只提供返回一个page的能力
abstract class AbstractRoutes {
  Widget buildPage(String path, dynamic arguments);
}

/// AppRoutes实现多page公用一个store，适合全新App使用
class AppRoutes<T> implements AbstractRoutes {
  final Map<String, Dependent<T>> pages;
  final PageStore<T> _store;
    ...
}

/// 一个page，一个store，适合部分页面改写flutter的App使用，如现在的闲鱼 
class PageRoutes implements AbstractRoutes {
  final Map<String, Page<Object, dynamic>> pages;
    ...
}

/// 混合Routes，可以同时使用AppRoutes和PageRoutes，适合都要的App，如未来一段时间的闲鱼
class HybridRoutes implements AbstractRoutes {
  final List<AbstractRoutes> routes;
    ...
}

Как использовать

Определить AppRoute

/// app_route.dart
/// 因为是全局的，这里用单例，也比较方便调用
class AppRoute {
  static AbstractRoutes _global;
  static AbstractRoutes get global {
    if (_global == null) {
      _global = AppRoutes(preloadedState: AppState.initialState(), pages: {
        // 这里有两种写法，效果是一样的，带操作符的写法比较生动，也简短些。
        // RoutePath.todoList: TodoListPage().asDependent(TodoListConn()),
        RoutePath.todoList: TodoListConn() + TodoListPage(),
        RoutePath.todoDetail: TodoDetailConn() + TodoDetailPage(),
      });
    }
    return _global;
  }
}

/// 减少魔法字段，这些常量放在constant里也可以，放在这里只是方便。
class RoutePath {
  static const String todoList = 'todo_list';
  static const String todoDetail = 'todo_detail';
}

Определите AppState, который будет использоваться в качестве корневого узла дерева состояний.

/// screens/todo_list/state.dart
class AppState implements Cloneable<AppState> {
  TodoListState todoListState;
  TodoDetailState todoDetailState;

  AppState(this.todoListState, this.todoDetailState);

  @override
  AppState clone() {
    return AppState(todoListState, todoDetailState);
  }

  AppState.initialState()
      : todoListState = initState(null),
        todoDetailState = TodoDetailState();
}

Определите соединение, чтобы описать отношения преобразования между подсостоянием и родительским состоянием.

/// screens/todo_list/state.dart
/// get定义从大state取小state，set定义小state怎么改变大state
class TodoListConn extends ConnOp<AppState, TodoListState> {
  @override
  TodoListState get(AppState state) => state.todoListState;
  
  @override
  void set(AppState state, TodoListState subState) =>
      state.todoListState = subState;
}

Заменить способ создания исходной страницы
```
/// main.dart
home: AppRoute.global.buildPage(RoutePath.todoList, null),
```

Дополнительная обработка (Страница со скачком данных)

/// screens/todo_detail/reducer.dart
/// 页面跳转可能会有数据传递，比如list到detail页面，需要传递id,
/// 这是很常见的，那数据什么时候传递？自然是page生成的时候，可以看到[AbstractRoutes]
/// 的buildPage接受一个arguments参数，dynamic你可以传任意结构数据，推荐传Map，原生json样式
/// 如果arguments不为null，Route会帮我们发一个route的Action，
/// 所以我们需要在对应的Reducer里处理一下
Reducer<TodoDetailState> buildReducer() {
  return asReducer<TodoDetailState>(<Object, Reducer<TodoDetailState>>{
    RouteAction.route: _route,
      ...
  });
}

/// 接到route Action，更新下state的id
TodoDetailState _route(TodoDetailState state, Action action) {
  final TodoDetailState newState = state.clone();
  newState.id = action.payload['id'];
  return newState;
}

Сравнительный опыт Flutter Redux

Лучшие практики Fish Redux и Flutter Redux всегда были разными: одна — управление состоянием на уровне страницы, а другая — управление состоянием на уровне приложения, так что это продукт, конкурирующий с дислокацией. После того, как Fish Redux присоединится к Route, он также считается завершенным, после использования обоих я просто сравню:

Удобство

Flutter Redux вызывается просто, и сложно глубоко понять смысл API. В Fish Redux много понятий, похоже на сглаживание двумерного массива, множество определений и понятий могут убедить небольшое количество нетерпеливых студентов. Тем не менее, цель фреймворка ясна, а в коде есть следы тщательного проектирования. Это равная доля для меня.
Пример документации

Flutter Redux побеждает. Документов и примеров гораздо больше, чем недавно открытый Fish Redux. Документов Fish Redux не так много, но есть китайские версии.
ответ на проблему

Fish Redux побеждает: вопросы на Github могут получать ответы и ответы от авторов или энтузиастов сети в течение 12 часов. Автор Flutter Redux поддерживает множество библиотек и имеет ограниченную энергию, поэтому скорость обработки Issue можно назвать прокрастинацией.
полнота

Функционально завершенный Flutter Redux должен полагаться на две библиотеки по форме, Fish Redux немного лучше без каких-либо других сторонних зависимостей.
представление

На самом деле первоначальный замысел государственного управления не заботится о производительности, ведь это всего лишь государственное управление, а управление требует дополнительных затрат. Но fish redux обратил на это внимание и сделал более заметные оптимизации для сценариев с большими списками, а улучшение производительности только что было улучшено.

Итог: Fish Redux — хороший кандидат на управление состоянием во Flutter, и он растет с ощутимой скоростью.

следовать за

После сравнения, я думаю, что Fish Redux хорош, я хочу продать его боссу.

Я: Сообщите боссу, Ali's Fish Redux — это старый NB, он нам нужен для нашего проекта?

Босс: Где NB?

Я: Барбара~

Босс: Какие крупные фабрики его используют?

Я: эээ, похоже на Али

Босс: Каково покрытие юнит-тестами?

Я: почти 50%

Босс: Насколько улучшилась производительность?Есть ли эталон?

Я:. . .

Извините, вышесказанное просто мой мозг, но с профессионализмом моего начальника эти вопросы надо задавать. . .

Исходный адрес этой статьи: https://github.com/hyjfine/flutter_redux_sample/tree/fish-redux-route.

(над)

@зилуюАвторские права на эту статью принадлежат команде Retain R&D, добро пожаловать на перепечатку, пожалуйста, сохраните источник.