Flutter Redux and Hook.如何观察变量实例的变化在useEffect像反应? &g



我是新手,正在尝试观察一个变量& count ",它处于像React native这样的reducer状态。我使我的redux和hook工作完美。变量计数在屏幕上改变,但永远不会再次调用useEffect(只有一次)事件,如果我改变了deaction。尝试了不同的方法,但没有成功,并尝试将StoreProvider.of(context).state. balancestate。直接在useEffect的依赖项中计数。如果我使用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;
}

请查看此问题:https://github.com/brianegan/flutter_redux/issues/244

这个库不支持开箱即用的颤振钩子,因为它是Flutter生态系统中的第三方软件包。这个图书馆只有构建与flutter + redux一起工作。

请参阅替代包,例如https://pub.dev/packages/redux_hooks获得该功能!

相关内容