Recently, because the company started a new project, considering the technology selection, I learned about the flutter, recorded it, and taught my teacher to swim!!

1. Introduction of plug-ins

pubspec.yaml

Dependencies: fish_redux: ^ 0.3.1Copy the code

pub get

Install plug-ins

FishReduxTemplate

3. Coding

1. page.dart

XxxPage () Page entry. Inherited from component.


class UserOrderListPage extends Page<UserOrderListState, Map<String, dynamic>> {
  UserOrderListPage()
      : super(
            initState: initState,
            effect: buildEffect(),
            reducer: buildReducer(),
            view: buildView,
            dependencies: Dependencies<UserOrderListState>(
                adapter: null,
                slots: <String, Dependent<UserOrderListState>>{
                }),
            middleware: <Middleware<UserOrderListState>>[
            ],);

}

Copy the code
2. view.dart

Page UI drawing.

Widget buildView( UserOrderListState state, Dispatch dispatch, ViewService viewService) { // return Container(); Return Scaffold(appBar: new appBar (leading: BackButton(), title: new Text(' user profile '),), Body: state.orderList! = null ? new ListView.builder( itemBuilder: (BuildContext context, int index) { return new Text(state.orderList[index].projectName); // return _buildItem(dispatch,state.orderList[index]); }, itemCount: state.orderList.length, ) : Center(child: CircularProgressIndicator()), ); }}Copy the code
3. state.dart

Page data state, store data.

List<CustomerInfoOrderList> orderList; @override UserOrderListState clone() { return UserOrderListState() .. orderList = orderList; }Copy the code
4. effect.dart

Lifecycle calls, and handles some logic other than state updates.

Effect<UserOrderListState> buildEffect() { return combineEffects(<Object, Effect < UserOrderListState > > {UserOrderListAction. Action: _onAction, Lifecycle. InitState: _init, / / page initialization}); } void _onAction(Action action, Context<UserOrderListState> ctx) {} void _init(Action action, Context<UserOrderListState> ctx) async { try { var customer = await HttpUtils.postAsT<CustomerInfoEntity>(Api.queryCustomer, map: { "userId": 88360, }); if (customer ! = null) { ctx.dispatch(UserOrderListActionCreator.onLoadData( UserOrderListState().. orderList = customer.orderList)); }} catch (e) {logutil.v (" failed to load user order list data "); }}Copy the code
5. action.dart

Defined action. When we need to handle some action or event, we dispatch a specific action and let the receiver of that action handle it.

enum UserOrderListAction { action,loadData } class UserOrderListActionCreator { static Action onAction() { return const Action(UserOrderListAction.action); } static Action onLoadData(UserOrderListState state) { return Action(UserOrderListAction.loadData,payload: state); }}Copy the code
6. reducer.dart

Same as effect, but mainly handles some logic other than state updates. Try not to involve other logic processing, other logic into effect.

Reducer<UserOrderListState> buildReducer() { return asReducer( <Object, Reducer<UserOrderListState>>{ UserOrderListAction.action: _onAction, UserOrderListAction.loadData: _onLoadData, }, ); } UserOrderListState _onAction(UserOrderListState state, Action action) { final UserOrderListState newState = state.clone(); return newState; } // Initialize the data UserOrderListState _onLoadData(UserOrderListState state, Action action) { try { final UserOrderListState newState = state.clone(); if (action.payload is UserOrderListState) { if ((action.payload as UserOrderListState).orderList is List) { newState.orderList = (action.payload as UserOrderListState).orderList; } } return newState; } catch (e) { print(e); return state; }}Copy the code

The beans and DIO network access code are omitted.

Note: The data request arrived, but the UI did not refresh. Check whether orderList in newState in Reducer is updated.

1). Component

Write a TAB inside the two fragment implementation:

The TAB implementation code is the same as above, except that the TAB hop fragment can not use xxPage() entry, use component. In the TAB Page. The dart


dependencies: Dependencies<RecordTabState>(
        adapter: null,
        slots: <String, Dependent<RecordTabState>>{
          "record_info": RecordInfoConnector()+RecordInfoComponent(),
        }),
Copy the code

frgment is generated using the template Component. Connector part code:

@override RecordInfoState computed(RecordTabState state) { return RecordInfoState().. index = state.currentIndex; } @override List factors(RecordTabState state) { return [state.currentIndex]; } @override RecordInfoState get(RecordTabState state) { final newState = RecordInfoState().clone(); newState.. index = state.currentIndex; newState.. listHistory = state.listHistory; return newState; } @override void set(RecordTabState state, RecordInfoState subState) { state.currentIndex = subState.index; state.listHistory = subState.listHistory; }Copy the code

2). Life cycle

enum Lifecycle { /// componenmt(page) or adapter receives the following events initState, didChangeDependencies, build, reassemble, didUpdateWidget, deactivate, dispose, // didDisposed, /// Only a adapter mixin VisibleChangeMixin will receive appear & disappear events. /// class MyAdapter extends Adapter<T> with VisibleChangeMixin<T> { /// MyAdapter():super( /// /// /// ); /// } appear, disappear, /// Only a componenmt(page) or adapter mixin WidgetsBindingObserverMixin will receive didChangeAppLifecycleState event. /// class MyComponent extends Component<T> with WidgetsBindingObserverMixin<T> { /// MyComponent():super( /// /// /// );  /// } didChangeAppLifecycleState, }Copy the code