Flutter redux

https://gist.github.com/riskers/f05e8ad1f2dd5e07ccd0ad86fe82e26f

redux-combine.dart

https://gist.github.com/riskers/f05e8ad1f2dd5e07ccd0ad86fe82e26f#file-redux-combine-dart

redux-simple.dart
https://gist.github.com/riskers/f05e8ad1f2dd5e07ccd0ad86fe82e26f#file-redux-simple-dart

redux-thunk.dart
https://gist.github.com/riskers/f05e8ad1f2dd5e07ccd0ad86fe82e26f#file-redux-thunk-dart

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';
import 'package:flutter_redux/flutter_redux.dart';

class AppState {
  final int count;
  final int clickCount;

  AppState({
    this.count,
    this.clickCount,
  });

  AppState copyWith({count, clickCount}) {
    return AppState(
      count: count ?? this.count,
      clickCount: clickCount ?? this.clickCount,
    );
  }
}

enum Actions {
  Click,
  Increment,
  Decrement,
}

ThunkAction<AppState> asyncIncrement() {
  return (Store<AppState> store) async {
    await Future.delayed(Duration(seconds: 2));

    store.dispatch(Actions.Increment);
  };
}



AppState counterReducer(AppState state, dynamic action) {
  switch (action) {
    case Actions.Increment:
      return state.copyWith(count: state.count + 1);
    case Actions.Decrement:
      return state.copyWith(count: state.count - 1);
  }

  return state;
}

AppState valueReducer(AppState state, dynamic action) {
  if (action == Actions.Click) {
    return state.copyWith(clickCount: state.clickCount + 1);
  }

  return state;
}

final reducers = combineReducers<AppState>([
  counterReducer,
  valueReducer,
]);

void main() {
  final store = new Store<AppState>(
    reducers,
    middleware: [thunkMiddleware],
    initialState: AppState(
      count: 0,
      clickCount: 0,
    ),
  );

  runApp(FlutterReduxApp(
    title: 'Flutter Redux Demo',
    store: store,
  ));
}

class AppStateViewModel {
  final AppState state;
  final void Function() onClick;

  AppStateViewModel({
    this.state,
    this.onClick,
  });
}

class SimpleText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
      converter: (store) {
        return AppStateViewModel(
          state: store.state,
        );
      },
      builder: (context, vm) {
        String count = vm.state.count.toString();
        String clickCount = vm.state.clickCount.toString();

        return new Text(
          'count: $count, clickCount: $clickCount',
          style: Theme.of(context).textTheme.subhead,
        );
      },
    );
  }
}

class AddButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
      converter: (store) {
        return AppStateViewModel(
          onClick: () {
            store.dispatch(Actions.Increment);
            store.dispatch(Actions.Click);
          }
        );
      },
      builder: (context, vm) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: new FloatingActionButton(
            // Attach the `callback` to the `onPressed` attribute
            onPressed: vm.onClick,
            tooltip: 'Increment',
            child: new Icon(Icons.exposure_plus_1),
          ),
        );
      },
    );
  }
}

class AddAsyncButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
      converter: (store) {
        return AppStateViewModel(
          onClick: () {
            store.dispatch(asyncIncrement());
            store.dispatch(Actions.Click);
          }
        );
      },
      builder: (context, vm) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: new FloatingActionButton(
            // Attach the `callback` to the `onPressed` attribute
            onPressed: vm.onClick,
            tooltip: 'Increment',
            child: new Icon(Icons.slow_motion_video),
          ),
        );
      },
    );
  }
}

class DesButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
      converter: (store) {
        return AppStateViewModel(
          onClick: () {
            store.dispatch(Actions.Decrement);
          }
        );
      },
      builder: (context, vm) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: new FloatingActionButton(
            // Attach the `callback` to the `onPressed` attribute
            onPressed: vm.onClick,
            tooltip: 'des',
            child: new Icon(Icons.exposure_neg_1),
          ),
        );
      },
    );
  }
}

class FlutterReduxApp extends StatelessWidget {
  final Store<AppState> store;
  final String title;

  FlutterReduxApp({Key key, this.store, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        theme: ThemeData.dark(),
        title: title,
        home: Scaffold(
          appBar: AppBar(
            title: new Text(title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new Text(
                  'You have pushed the button this many times:',
                ),
                SimpleText(),
              ],
            ),
          ),
          // Connect the Store to a FloatingActionButton. In this case, we'll
          // use the Store to build a callback that with dispatch an Increment
          // Action.
          //
          // Then, we'll pass this callback to the button's `onPressed` handler.
          floatingActionButton: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              AddButton(),
              DesButton(),
              AddAsyncButton(),
            ],
          ),
        ),
      ),
    );
  }
}

注意⚠️

比较重要的几点：

1. combineReducers
2. AppStateModel
3. FatchDataList

// import 'package:meta/meta.dart';
// import 'package:flutter/src/widgets/actions.dart' hide Action;
// import 'package:redux_thunk/redux_thunk.dart';
import 'package:jianye_data/api/user.dart';
import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';

/// State中所有属性都应该是只读的
class CountState {
  int count;
  // get count => _count;

  dynamic codeData;
  // get codeData => _codeData;
  // set codeData(value) {
  //   this._codeData = value;
  // }

  CountState({this.count, this.codeData});

  //这段代码写在State中
  CountState.initState() {
    count = 0;
    codeData = {};
  }

  CountState copyWith({count, codeData}) {
    return CountState(
      count: count ?? this.count,
      codeData: codeData ?? this.codeData,
    );
  }
}

/// 定义操作该State的全部Action
/// 这里只有增加count一个动作
enum Actions { increment, decrease, setCode }

/// reducer会根据传进来的action生成新的CountState
CountState countReducers(CountState state, dynamic action) {
  switch (action) {
    case Actions.increment:
      return state.copyWith(count: state.count + 1);
    case Actions.decrease:
      return state.copyWith(count: state.count - 1);
  }
  return state;
}

CountState dataReducers(CountState state, dynamic action) {
  // switch (action) {
  //   case Actions.setCode:
  //     print(action);
  //     print(state);
  //     return state.copyWith(codeData: {'aaa': 111});
  //     case
  // }

  if (action == Actions.setCode) {
    return state;
  } else if (action is FetchCodeDataAction) {
    print(action);
    return state.copyWith(codeData: action.codeData);
  }

  return state;
}

class FetchCodeDataAction {
  dynamic codeData;

  FetchCodeDataAction(this.codeData);
}

ThunkAction<CountState> asyncGetCode() {
  return (Store<CountState> store) async {
    try {
      var res = await getCode();
      print(res.body);
      store.dispatch(FetchCodeDataAction(res.body));
    } catch (e) {
      store.dispatch(FetchCodeDataAction(null));
    }
  };
}

final reducers = combineReducers<CountState>([
  countReducers,
  dataReducers,
]);