title: How to watch state changes in flutter redux
body: <p>I'm new to Flutter Redux, I got a problem and I have no idea how to deal with it at all! I extracted the main code to keep this simple - tap indicators to switch PageView, scroll PageView to synchronise the indicator. Here is my code:</p>
  
  <p><strong>app state:</strong></p>
  
  <pre><code>class AppState {
    final List menuList;
    final int currentIndex;
  
    AppState({this.menuList, this.currentIndex});
  }
  </code></pre>
  
  <p><strong>the reducers:</strong></p>
  
  <pre><code> AppState appReducer(AppState state, Object action) {
    return AppState(
        menuList: menuListReducer(state.menuList, action),
        currentIndex: currentIndexReducer(state.currentIndex, action));
  }
  
  final menuListReducer = combineReducers&lt;List&gt;(
      [TypedReducer&lt;List, SetMenuListAction&gt;(_setMenuList)]);
  
  List _setMenuList(List menuList, SetMenuListAction action) {
    menuList = action.menuList;
    return menuList;
  }
  
  final currentIndexReducer = combineReducers&lt;int&gt;(
      [TypedReducer&lt;int, SetCurrentIndexAction&gt;(_setCurrentIndex)]);
  
  int _setCurrentIndex(int currentIndex, SetCurrentIndexAction action) {
    currentIndex = action.index;
    return currentIndex;
  }
  </code></pre>
  
  <p><strong>the action:</strong></p>
  
  <pre><code>class SetMenuListAction {
    List menuList;
  
    SetMenuListAction(this.menuList);
  }
  
  class SetCurrentIndexAction {
    int index;
  
    SetCurrentIndexAction(this.index);
  }
  </code></pre>
  
  <p><strong>the main logic:</strong></p>
  
  <pre><code>void main() {
    final store = Store&lt;AppState&gt;(
      appReducer,
      initialState: AppState(menuList: [
        {
          'picUrl': 'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
          'description': 'this is the first image'
        },
        {
          'picUrl': 'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
          'description': 'this is the second image'
        },
        {
          'picUrl':
              'http://img4.imgtn.bdimg.com/it/u=3434394339,2114652299&amp;fm=214&amp;gp=0.jpg',
          'description': 'this is the third image'
        },
        {
          'picUrl': 'http://pic1.win4000.com/pic/2/07/8c57e143b1.jpg',
          'description': 'this is the fourth image'
        },
      ], currentIndex: 0),
    );
  
    runApp(App(
      store: store,
    ));
  }
  
  // App
  class App extends StatelessWidget {
    final Store&lt;AppState&gt; store;
  
    const App({Key key, this.store}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return StoreProvider(
        store: store,
        child: MaterialApp(title: 'Flutter redux example', home: MyDetail()),
      );
    }
  }
  
  class MyDetail extends StatefulWidget {
    @override
    _MyDetailState createState() =&gt; _MyDetailState();
  }
  
  class _MyDetailState extends State&lt;MyDetail&gt; with TickerProviderStateMixin {
    PageController _controller;
  
    @override
    void initState() {
      _controller = PageController(initialPage: 0);
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return StoreConnector&lt;AppState, int&gt;(
        converter: (store) =&gt; store.state.currentIndex,
        onDidChange: (newIdx) {
          //this won't work because the _controller hasn't been attached to PageView
          _controller.jumpToPage(newIdx);
        },
        builder: (BuildContext context, int idx) {
          return StoreConnector&lt;AppState, List&gt;(
            converter: (store) =&gt; store.state.menuList,
            onDidChange: (newList) {
              //maybe do something further
            },
            builder: (BuildContext context, List menus) {
              return Container(
                color: Colors.white,
                child: Column(
                  children: &lt;Widget&gt;[
                    //pageview
                    Expanded(
                      child: PageView(
                        children: menus.map((item) {
                          return Column(
                            children: &lt;Widget&gt;[
                              Image.network(item['picUrl']),
                              Text(
                                item['description'],
                                style: TextStyle(fontSize: 24.0),
                              )
                            ],
                          );
                        }).toList(),
                        onPageChanged: (int index) {
                          StoreProvider.of&lt;AppState&gt;(context)
                              .dispatch(SetCurrentIndexAction(index));
                        },
                        physics: BouncingScrollPhysics(),
                      ),
                    ),
                    //indicators
                    Container(
                      margin: EdgeInsets.only(bottom: 50.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: menus
                            .asMap()
                            .map((i, item) =&gt; MapEntry(
                                i,
                                GestureDetector(
                                  onTap: () {
                                    //this won't work either maybe because the widgets is rebuilding
                                    _controller.jumpToPage(i);
                                    StoreProvider.of&lt;AppState&gt;(context)
                                        .dispatch(SetCurrentIndexAction(i));
                                  },
                                  child: Container(
                                    width: 10.0,
                                    height: 10.0,
                                    color: i == idx
                                        ? Colors.purpleAccent
                                        : Colors.blue,
                                    margin: EdgeInsets.only(right: 10.0),
                                  ),
                                )))
                            .values
                            .toList(),
                      ),
                    )
                  ],
                ),
              );
            },
          );
        },
      );
    }
  }
  </code></pre>
  
  <p>Sorry for the long code, but I think maybe this can help to understand my problem:</p>
  
  <ol>
  <li>When I tap the indicator, I want to synchronise the PageView, that is <code>_controller.jumpToPage(i)</code>, but it will show Errors. So how to make this work?</li>
  <li>I can change the <code>currentIndex</code> in another screen, how to synchronise the PageView?</li>
  <li>Is there any method to watch the state changes(separately, not the whole state) and do something?</li>
  </ol>