Flutter begann mit der Implementierung des Redux

Flutter-Redux:

Flutter Redux ist eine unidirektionale Datenflussarchitektur für eine einfache App-Entwicklung. Diese Art der App-Entwicklung erleichtert auch das Testen.

pubspec.yaml:

Fügen Sie die Abhängigkeit flutter_redux hinzu und aktualisieren Sie auf die neueste verfügbare Version.

dependencies:
  flutter:
    sdk: flutter

  flutter_redux: ^0.8.2

main.dart:

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

enum Actions { inc, dec }

int counterReducer(int count, dynamic action){

  if(action == Actions.inc) {
    return count + 1;
  } else if(action == Actions.dec){
    return count - 1;
  }
  return count;
}

void main(){
  final store = Store<int>(counterReducer, initialState: 0);

  runApp(MyApp(
    store : store
  ));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  const MyApp({Key? key, required this.store}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreProvider(store: store, child: MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Redux Example"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              StoreConnector<int, String>(builder: (context, count){
                return Text("Count is $count");
              }, converter: (store) => store.state.toString()),

              StoreConnector<int, VoidCallback>(builder: (context, callback){
                return TextButton(onPressed: callback, child: const Text("Increment"));
              }, converter: (store){
                return () => store.dispatch(Actions.inc);
              }),

              StoreConnector<int, VoidCallback>(builder: (context, callback){
                return TextButton(onPressed: callback, child: const Text("Decrement"));
              }, converter: (store){
                return () => store.dispatch(Actions.dec);
              })
            ],
          ),
        ),
      ),
    ));
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *