Блог

Я новичок в flutter и пытаюсь наблюдать за переменной «count», которая находится в состоянии редуктора, как у React native. Я сделал так, чтобы мои переделки и крючки работали идеально. Количество переменных изменяется на экране, но никогда больше не вызывайте событие useEffect(только один раз), если я изменю действие. Попробовал разные подходы без успеха и попытался поместить StoreProvider.of(context).state.balanceState.count непосредственно в зависимость от эффекта использования. Если я использую 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);
}
 

my Reducer

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