将 ChangeNotifier 从 provider 迁移到 hooks_riverpod

Question

我想将我的整个项目从提供商转移到 Riverpod。但我被困在了这一点上。

class EditQuestionScreen extends StatelessWidget {
  EditQuestionScreen({this.question, this.answers});

  final QuestionModel question;
  final List<AnswerModel> answers;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) => QuestionProvider(
            question: this.question,
            answers: this.answers),
        child: Container());
  }
}

这是我的子小部件提供程序小部件。它只初始化一次。我怎样才能把这个类写成一个带riverpod的HookWidget？

Answer 1

快速说明 - 使用 Provider 或 Riverpod，您并不真正想要/不需要命名您提供的东西提供 thingProvider。您不是在提供提供者，而是在提供有意义的东西。

我已尽力填补您未提供的其余代码的空白，因此希望这会有所帮助：

class QuestionModel {
  QuestionModel(this.id);

  final int id;
}

class AnswerModel {
  AnswerModel(this.id);

  final int id;
}

class QuestionWithAnswers {
  QuestionWithAnswers(this.question, this.answers);

  final QuestionModel question;
  final List<AnswerModel> answers;
}

class QuestionAnswerNotifier extends ChangeNotifier {
  QuestionAnswerNotifier(this.qwa);

  final QuestionWithAnswers qwa;

  QuestionModel get question => qwa.question;
  List<AnswerModel> get answers => qwa.answers;

  addAnswer(AnswerModel answer) {
    qwa.answers.add(answer);
    notifyListeners();
  }
}

final questionProvider =
    ChangeNotifierProvider.family<QuestionAnswerNotifier, QuestionWithAnswers>(
        (ref, qwa) => QuestionAnswerNotifier(qwa));

class EditQuestionScreen extends HookWidget {
  EditQuestionScreen({
    @required QuestionModel question,
    @required List<AnswerModel> answers,
    Key key,
  })  : qwa = QuestionWithAnswers(question, answers),
        super(key: key);

  final QuestionWithAnswers qwa;

  @override
  Widget build(BuildContext context) {
    final provider = useProvider(questionProvider(qwa));

    // Use data from provider to render your UI, for example:
    return Container(
      child: Column(
        children: <Widget>[
          Text('${provider.question}\n${provider.answers}'),
          RaisedButton(
            onPressed: () => provider.addAnswer(AnswerModel(5)),
            child: Icon(Icons.add),
          )
        ],
      ),
    );
  }
}

这里有几点需要注意。

1. 在 Riverpod 中，family 是我们将参数传递给提供者的方式。
2. QuestionWithAnswers 类通过 family 提供的额外参数捆绑了您要传递给提供者的模型。
3. 提供者的名称以 Provider 为后缀，而不是它所提供的东西被这样命名。
4. 我们提供了 ChangeNotifier，所以这就是调用 useProvider 时返回的内容。