Store error

[jingzhanwu]

Can you define multiple Stores? My requirement is: a global Store, other pages have a separate Store; I now create two Stores, one is initialized in Main, the other is initialized in the sub-page, the result of sub-page error.

void main() { runApp(new IndexPage()); SystemUiOverlayStyle style = new SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(style); }

//Entrance page class IndexPage extends StatelessWidget { ///INIT store final store = new Store<APPState>(appReducer, initialState: new APPState( user: User( id: "001", name: "TEST", pwd: "123456", sex: 28.toString(), address: "")));

@override Widget build(BuildContext context) { return StoreProvider( store: store, child: StoreBuilder<APPState>(builder: (context, store) { return MaterialApp( title: "title", routes: { "main": (BuildContext context) => MainPage(), }, theme: new ThemeData( primaryColor: Color(0xff0081F9), ), home: LoginPage(), ); }), ); } }

///sub page class MicroGroupList extends StatefulWidget { @override State<StatefulWidget> createState() { return _GroupState(); } }

class _GroupState extends State<MicroGroupList> with AutomaticKeepAliveClientMixin<MicroGroupList> { final store = new Store<MicroGroupState>(groupReducer, middleware: [groupMiddleware], initialState: MicroGroupState(groups: []));

// List<MicroGroup> _groupList = []; bool _loading = true;

@override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((callback) { _refreshData(); }); }

@override bool get wantKeepAlive => true;

@override Widget build(BuildContext context) { return StoreProvider( store: store, child: StoreConnector<MicroGroupState, List<MicroGroup>>( builder: (context, list) { return Scaffold( body: RefreshIndicator( onRefresh: _refreshData, child: ListView.builder( physics: BouncingScrollPhysics(), itemCount: list.length, itemBuilder: (context, index) { return _MicroGroupItem(list[index]); }), ), ); }, converter: (store) => store.state.groups), ); }

[miquelbeltran]

Hi @jingzhanwu Could you post a link to a sample project that showcases the issue you have? I looked at the code you posted after copying to a project but there's parts missing.

[jingzhanwu]

Sorry, the code is not available for the time being! My question is: Can Store initialize more than one in the entire application? For example, different pages initialize different Stores instead of global ones. BloC can do this, and I make mistakes when I try to do it in Flutter-Redux.

[miquelbeltran]

You could define multiple Stores, then use two StoreProviders, like this:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final storeAppState = Store<AppState>(
    combineReducers([]),
  );
  final storeSecondAppState = Store<SecondAppState>(
    combineReducers([]),
  );

  @override
  Widget build(BuildContext context) {
    return StoreProvider<AppState>(
      store: storeAppState,
      child: StoreProvider<SecondAppState>(
        store: storeSecondAppState,
        child: MainScreen(),
      ),
    );
  }
}

class AppState {}

class SecondAppState {}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StoreConnector<AppState, AppState>(
        converter: (store) => store.state,
        builder: (c, s) => StoreConnector<SecondAppState, SecondAppState>(
          converter: (store) => store.state,
          builder: (c, s) => Scaffold(),
        ),
      ),
    );
  }
}

However, I would recommend you to not to do this, having multiple Stores can be a source of issues: https://stackoverflow.com/questions/33619775/redux-multiple-stores-why-not (this is for JS but the same learnings apply)

[jingzhanwu]

Thank you！ If you have information about Reducer and Middleware in Flutter-Redux, can I link to it? This is especially used in combination with combineReducers and asynchronous.

[miquelbeltran]

The best source I've found is @brianegan architecture samples like https://github.com/brianegan/flutter_architecture_samples/tree/master/redux

[maheshbhattaraai]

@miquelbeltran My issue is same as @jingzhanwu How can we store different page state which not required to be global. In react from reducer we can achieve state for specific reducer. How can we implement specific page state from redux.