我是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;
}
1条答案
按热度按时间ktca8awb1#
请看这个问题:https://github.com/brianegan/flutter_redux/issues/244
这个库不支持flutter hooks,因为它是Flutter生态系统中的第三方软件包。这个库只支持flutter + redux。
请参阅其他软件包,如https://pub.dev/packages/redux_hooks以获得该功能!