如何在flutter redux app中使用多个中间件？

Question

从下面的代码片段中，AppState包含2个列表（teachers和classrooms列表）。该商店被分配给一个中间件createClassroomMiddleware，我想为createTeacherMiddleware提供另一个中间件，用于对数据进行CRUD操作。如何在商店附加多个中间件？

我目前正在使用flutter redux库，并遵循此example

我的appState是

         class AppState {
             final List<ClassRoom> classrooms;
             final List<Teacher> teachers; //etc..
             AppState(this.classrooms, this.teachers); 
         } 

我的商店：

       Store<AppState> {
           initialState: new AppState(const [], const [])
           appReducer,
           middleware: createClassroomMiddleware()
      }

我的中间件：

      List<Middleware<AppState>> createClassroomMiddleware() {
          return combineTypedMiddleware([
             new MiddlewareBinding<AppState, ClassroomLoadedAction>(_loadClassrooms(), 
             new MiddlewareBinding<AppState, ClassroomDeletedAction>(_deleteClassroom()
          ]); 

     }

Answer 1

我认为解决方案可能比您预期的更容易！

您可以使用List类'addAll方法将这些中间件列表组合在一起。

Store<AppState> {
  initialState: new AppState(const [], const [])
  appReducer,
  middleware: createClassroomMiddleware()..addAll(createTeacherMiddleware())
}

这是如何运作的？在引擎盖下，middleware参数允许您根据需要向您的商店添加尽可能多的中间件，因为它只是一个List<Middleware<AppState>>。由于两个createMiddleware函数都返回一个列表，因此您需要将这两个列表组合成一个大列表。

你可以用List类'addAll方法做到这一点，如上所示！

Answer 2

而不是调用createClassroomMiddleware，命名为createAllMiddleware并放置所有中间件。那会解决吗？

Answer 3

这将按预期工作：

List<Middleware<AppState>> listMiddleWare = new List<Middleware<AppState>>();

class ReduxApp extends StatelessWidget {
  final store = Store<AppState>(
    appReducer,
    initialState: AppState.loading(),
    middleware: listMiddleWare
      ..addAll(createStoreOne())
      ..addAll(createStoreOrdersMiddleware()),
  );
}

Answer 4

商店里的middleware物业是List<Middleware<State>>。

如果你想在同一个商店中添加不同的中间件，你只需要连接它们，并且在dart中连接list的简单方法是：

[]..addAll(list1)..addAll(list2)..addAll(listn)

在你的例子中：

class ReduxApp extends StatelessWidget {
  final store = Store<AppState>(
    appReducer,
    initialState: new AppState(const [], const []),
    middleware: []
      ..addAll(createClassroomMiddleware())
      ..addAll(createTeacherMiddleware()),
  );
}