Saltar al contenido principal

^0.14.0 a ^1.0.0

Despu茅s de una larga espera, finalmente se lanz贸 la primera versi贸n estable de Riverpod 馃憦

Para ver la lista completa de cambios, consulte el registro de cambios.
En esta p谩gina, nos centraremos en c贸mo migrar una aplicaci贸n Riverpod existente de la versi贸n 0.14.x a la versi贸n 1.0.0.

Usando la herramienta de migraci贸n para actualizar autom谩ticamente tu proyecto a la nueva sintaxis

Antes de explicar los diversos cambios, vale la pena se帽alar que Riverpod viene con una herramienta de l铆nea de comandos para migrar autom谩ticamente su proyecto por usted.

Instalaci贸n de la l铆nea de comandos

Para instalar la herramienta de migraci贸n, ejecuta:

dart pub global activate riverpod_cli

Ahora deber铆as poder ejecutar:

riverpod --help

Uso

Ahora que la l铆nea de comando est谩 instalada, podemos comenzar a usarla.

  • Primero, abre el proyecto que desea migrar en su terminal.

  • No actualices Riverpod.
    La herramienta de migraci贸n actualizar谩 la versi贸n de Riverpod por usted.

    Advertencia

    No actualizar Riverpod es importante.
    La herramienta no se ejecutar谩 correctamente si ya ha instalado la versi贸n 1.0.0. Como tal, aseg煤rese de estar utilizando correctamente una versi贸n anterior antes de iniciar la herramienta.

  • Aseg煤rese de que su proyecto no contenga errores.

  • Ejecuta:

    riverpod migrate

La herramienta luego analizar谩 su proyecto y sugerir谩 cambios. Por ejemplo, puedes ver:

-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)?

Para aceptar el cambio, simplemente presione y. De lo contrario, para rechazarlo, presione n.

Los cambios

Ahora que hemos visto c贸mo usar la CLI para actualizar autom谩ticamente tu proyecto, veamos en detalle los cambios necesarios.

Unificaci贸n de sintaxis

La versi贸n 1.0.0 de Riverpod se centr贸 en la unificaci贸n de la sintaxis para interactuar con los providers. Antes, Riverpod ten铆a muchas sintaxis similares pero a煤n diferentes para leer un provider, como ref.watch(provider) vs useProvider(provider) vs watch(provider). Con la versi贸n 1.0.0, solo queda una sintaxis: ref.watch(provider). Las dem谩s fueron eliminadas.

Como:

  • useProvider se elimina a favor de HookConsumerWidget.

    Antes:

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

    Despu茅s:

    class Example extends HookConsumerWidget {
    @override
    Widget build(BuildContext context, WidgetRef ref) {
    useState(...);
    int count = ref.watch(counterProvider);
    ...
    }
    }
  • Se cambia el prototipo del m茅todo build del ConsumerWidget y el m茅todo builder del Consumer.

    Antes:

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

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

    Despu茅s:

    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 se elimina en favor de ref.read.

    Antes:

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

    Despu茅s:

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

Actualizaci贸n de StateProvider

StateProvider se actualiz贸 para coincidir con StateNotifierProvider.

Antes, hacer ref.watch(StateProvider) devolv铆a una instancia de StateController. Ahora solo devuelve el estado del StateController.

Para migrar tienes algunas soluciones. Si tu c贸digo solo obtuvo el estado sin modificarlo, puedes cambiar

De:

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

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

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

a:

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

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

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

Alternativamente, puede usar el nuevo StateProvider.state para mantener el comportamiento anterior.

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

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

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