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(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(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 createState() {
return _GroupState();
}
}

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

// List _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>(
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.