Flutter Redux和Hook.如何观察变量示例在useEffect中的变化?

uxh89sit  于 2023-04-06  发布在  Flutter
关注(0)|答案(1)|浏览(139)

我是Flutter的新手,试图观察一个处于Reducer状态的变量“count”,就像React native一样。我让我的redux和hook工作得很完美。变量count在屏幕上改变,但再也没有调用useEffect(only once)event if i change de action. Tried diferente aproachs without success and tried to put StoreProvider.的(context).state.balanceState.count直接在useEffect的dependecis中。如果我使用useState,就像应该的那样工作。

class StatePage extends HookWidget {
  const StatePage({Key key}) : super(key: key);   

  @override
  Widget build(BuildContext context) {

    int count = StoreProvider.of<AppState>(context).state.balanceState.count;


    useEffect(() {

      WidgetsBinding.instance.addPostFrameCallback((_) =>
          StoreProvider.of<AppState>(context).dispatch(getBalanceThunk()));
    }, [count]);

    return Scaffold(
      appBar: AppBar(
        title: Text('ola'),
      ),
      body: Center(
        child: StoreConnector<AppState, BalanceState>(
          converter: (store) => store.state.balanceState,
          builder: (context, state) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                if (state.loading)
                  Column(
                    children: [
                      CircularProgressIndicator(),
                      SizedBox(
                        height: 30,
                      )
                    ],
                  ),
                Text(state.message),
                Text(count.toString()),
                RaisedButton(
                    child: Text('Clicar'),
                    onPressed: (){
                      StoreProvider.of<AppState>(context).dispatch(SetCountAction(count++));
                    })
              ],
            );
          },
        ),
      ),
    );
  }
}

我的行动

abstract class BalanceAction {}

class BalanceStateAction  extends BalanceAction {
    final bool loading;
    final bool error;
    final String message;
    BalanceStateAction(this.loading, this.error, this.message);
}

class SetBalanceAction  extends BalanceAction {
    final double value;
    SetBalanceAction(this.value);
}

class SetCountAction  extends BalanceAction {
    final int count;

    SetCountAction(this.count);
}

我的减速器

import 'package:flutter_red_test/redux/actions/balance_action.dart';

class BalanceState {
  final bool loading;
  final bool error;
  final String message;
  final double value;
  final int count;

  BalanceState({
    this.loading = false,
    this.count = 0,
    this.error = false,
    this.message = '',
    this.value = null,
  });

  factory BalanceState.initialState(){
    return BalanceState(
      loading: false,
      error: false,
      message: '',
      value: null,
      count: 0,
    );
  }

  BalanceState copy({bool loading, bool error, String message, double value, int count}){
    return BalanceState(
        loading: loading ?? this.loading,
        error: error ?? this.error,
        message: message ?? this.message,
        value: value ?? this.value,
      count: count ?? this.count,
    );
  }
}

BalanceState balanceReducer(BalanceState state, BalanceAction action){
        if(action is BalanceStateAction){
          return state.copy(
              loading: action.loading,
              message: action.message,
              value: state.value,
              error: action.error,
            count: state.count,
          );
        }
        if(action is SetBalanceAction){
          return state.copy(
            loading: false,
            message: 'Seu saldo é de 20.000',
            value: action.value,
            count: state.count,
            error: false,
          );
        }
        if(action is SetCountAction){
          return state.copy(
            loading: false,
            message: state.message,
            value: state.value,
            count: action.count,
            error: false,
          );
        }
      return state;
}
ktca8awb

ktca8awb1#

请看这个问题:https://github.com/brianegan/flutter_redux/issues/244
这个库不支持flutter hooks,因为它是Flutter生态系统中的第三方软件包。这个库只支持flutter + redux。
请参阅其他软件包,如https://pub.dev/packages/redux_hooks以获得该功能!

相关问题