^0.14.0 to ^1.0.0

Nach langem Warten ist die erste stabile Version von Riverpod endlich veröffentlicht 👏

Die vollständige Liste der Änderungen finden Sie in der Changelog.
Auf dieser Seite konzentrieren wir uns auf die Migration einer bestehenden Riverpod-Anwendung von Version 0.14.x auf Version 1.0.0.

Verwendung des Migrationstools zur automatischen Aktualisierung Ihres Projekts auf die neue Syntax

Bevor explaining the various changes, it is worth noting that Riverpod comes with a command-line tool to automatically migrate your project for you.

Vor der Erläuterung verschiedener Änderungungen, sollten Sie wissen, dass Riverpod über ein Kommandozeilen-Tool verfügt, mit dem Sie Ihr Projekt automatisch migrieren können.

Installation des Kommandozeilentools

Um das Migrationstools zu installieren, führe folgendes aus:

dart pub global activate riverpod_cli

Sie sollten jetzt in der Lage sein, Folgendes zu tun:

riverpod --help

Verwendung

Nun, da das CLI Tool installiert ist, können wir es benutzen.

• Öffnen Sie zunächst das Projekt, das Sie migrieren möchten, in Ihrem Terminal.

• Aktualisieren sie Riverpod nicht.
  Das Migrationstool wird die Version von Riverpod für sie aktualisieren.

  danger

  Es ist wichtig, Riverpod nicht manuell upzudaten. Das Tool wird nicht korrekt ausgeführt, wenn Sie bereits die Version 1.0.0 installiert haben. Stellen Sie daher sicher, dass Sie eine ältere Version verwenden, bevor Sie das Tool starten.

• Stellen sie sicher, dass ihr Projekt keine Fehler enthält.

• Ausführen:

  riverpod migrate

Das Tool analysiert dann Ihr Projekt und schlägt Änderungen vor. Zum Beispiel können Sie sehen:

-Widget build(BuildContext context, ScopedReader watch) {
+Widget build(BuildContext context, Widget ref) {
-  MyModel state = watch(provider);
+  MyModel state = ref.watch(provider);
}

Accept change (y = yes, n = no [default], A = yes to all, q = quit)?

Um die Änderungen anzunehmen, drücken sie einfach y. Ansonsten, drücken sie n um abzulehnen.

Die Änderungen

Nachdem wir nun gesehen haben, wie Sie Ihr Projekt mit Hilfe der CLI automatisch aktualisieren können, wollen wir uns die notwendigen Änderungen im Detail ansehen.

Syntaxvereinheitlichung

Die Version 1.0.0 von Riverpod konzentrierte sich auf die Vereinheitlichung der Syntax für die Interaktion mit Providern. Zuvor gab es in Riverpod viele ähnliche, aber unterschiedliche Syntaxen für das Lesen eines Providers, z.B. ref.watch(provider) vs. useProvider(provider) vs. watch(provider). Mit der Version 1.0.0 gibt es nur noch eine Syntax: ref.watch(provider). Die anderen Varianten wurden entfernt.

Als auch:

• useProvider wird zugunsten von HookConsumerWidget entfernt. Bevor:

  class Example extends HookWidget {
    @override
    Widget build(BuildContext context) {
      useState(...);
      int count = useProvider(counterProvider);
      ...
    }
  }

  Danach:

  class Example extends HookConsumerWidget {
    @override
    Widget build(BuildContext context, WidgetRef ref) {
      useState(...);
      int count = ref.watch(counterProvider);
      ...
    }
  }

• Der Prototyp von ConsumerWidget's build und Consumer's builder wurden geändert. Bevor:

  class Example extends ConsumerWidget {
    @override
    Widget build(BuildContext context, ScopedReader watch) {
      int count = watch(counterProvider);
      ...
    }
  }
  
  Consumer(
    builder: (context, watch, child) {
      int count = watch(counterProvider);
      ...
    }
  )

  Danach:

  class Example extends ConsumerWidget {
    @override
    Widget build(BuildContext context, WidgetRef ref) {
      int count = ref.watch(counterProvider);
      ...
    }
  }
  
  Consumer(
    builder: (context, ref, child) {
      int count = ref.watch(counterProvider);
      ...
    }
  )

• context.read wird zugunsten von ref.read entfernt. Bevor:

  class Example extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      SomeButton(
        onPressed: () => context.read(provider.notifier).doSomething(),
      );
    }
  }

  Danach:

  class Example extends ConsumerWidget {
    @override
    Widget build(BuildContext context, WidgetRef ref) {
      SomeButton(
        onPressed: () => ref.read(provider.notifier).doSomething(),
      );
    }
  }

StateProvider update

StateProvider wurde aktualisiert, um mit StateNotifierProvider übereinzustimmen.

Zuvor gab ref.watch(StateProvider) eine StateController-Instanz zurück. Jetzt gibt es nur noch den Zustand des StateControllers zurück.

Um zu migrieren, gibt es einige Lösungen. Wenn Ihr Code nur den Zustand erhalten hat, ohne ihn zu ändern, kann so migriert werden.

Von:

final provider = StateProvider<int>(...);

Consumer(
  builder: (context, ref, child) {
    StateController<int> count = ref.watch(provider);

    return Text('${count.state}');
  }
)

Zu:

final provider = StateProvider<int>(...);

Consumer(
  builder: (context, ref, child) {
    int count = ref.watch(provider);

    return Text('${count}');
  }
)

Alternativ kann das neue StateProvider.state verwendet werden, um das alte Verhalten beizubehalten.

final provider = StateProvider<int>(...);

Consumer(
  builder: (context, ref, child) {
    StateController<int> count = ref.watch(provider.state);

    return Text('${count.state}');
  }
)