brianegan / flutter_redux

A library that connects Widgets to a Redux Store
MIT License
1.65k stars 219 forks source link

Store error #138

Open jingzhanwu opened 5 years ago

jingzhanwu commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

maheshbhattaraai commented 5 years ago

@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.