Zum Hauptinhalt springen
‚ö†ÔłŹThe documentation for version 2.0 is in progress. A preview is available at: https://docs-v2.riverpod.dev

^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 {

    Widget build(BuildContext context) {
    useState(...);
    int count = useProvider(counterProvider);
    ...
    }
    }

    Danach:

    class Example extends HookConsumerWidget {

    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 {

    Widget build(BuildContext context, ScopedReader watch) {
    int count = watch(counterProvider);
    ...
    }
    }

    Consumer(
    builder: (context, watch, child) {
    int count = watch(counterProvider);
    ...
    }
    )

    Danach:

    class Example extends ConsumerWidget {

    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 {

    Widget build(BuildContext context) {
    SomeButton(
    onPressed: () => context.read(provider.notifier).doSomething(),
    );
    }
    }

    Danach:

    class Example extends ConsumerWidget {

    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}');
}
)