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类＆＃39;将这些中间件列表组合在一起。 addAll方法。

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

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

您可以使用List课程＆＃39; 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()),
  );
}

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

4 个答案: