Flutter redux state changes not updating immediately

[Rajakalla]

Hi,

I am new to flutter and redux. This library/package is very useful .But I am facing a problem with state updating in flutter widget. Without including redux , I have learnt that setState will automatically updates the UI widget tree.
But using redux library/ package not updating immeditely untill all the statements are executed.

The below is the example of my issue :
(){ store.dispatch(FirstAction()); store.dispatch(SecondAction()); store.dispatch(ThirdAction()); }

Here the first action should change the UI widget tree immediately ,then the second action should be done then after the third action.
My 1st and 3rd actions are circularprogress bar indicator, and the second action is fetching data (http request).without changing the UI to circular progress bar indicator it performing the second action.
I hope a quick solution for my problem .
Thank you

[brianegan]

Hey there -- are you synchronously dispatching all of these actions one after the next?

If so, that's probably the issue: Flutter may or may not re-render after each statement. Why? Because setState doesn't TRIGGER a rebuild, it marks the Widget as needing a rebuild. (Under the hood, flutter_redux is calling setState whenever the store changes).

Flutter will then schedule the repaint to happen on the next Frame draw. If all of these actions happen before the next frame draw (which is very likely if they're all synchronous), then you won't see Flutter redraw the intermediate states.

In fact, you can do the exact same thing without Redux! Just use setState three times in the same method on after the next, and you'll see the UI only renders the final setState data.

If you're not calling these things synchronously, please let me know and I'll see if I can figure out the problem!

Example using only setState and seeing the same behavior: https://gist.github.com/42b7e2ef856ca8f82f84c62cba46b2d4

[Rajakalla]

Thank you for your quick response.
But when i used setState three time like below it worked fine(isCircularProgressBarLoading:true loaded the CircularProgressBar before the next statement ).
funtion(){
.......
setState({isCircularProgressBarLoading:true});
await AadOAuth.login();
at=await oauth.getAccessToken();
setState({isCircularProgressBarLoading:true});
.......
}

[brianegan]

Yep -- that is adding some time in between each setState call. Therefore, Flutter is rendering the intermediate states. The same thing should work with Redux -- if you performed store.dispatch calls instead of setState it should work the exact same. Is that not the case?

[Rajakalla]

I used the same way but it worked in different way. But i understood a little about how the redux state works.
Thank you.

[amercobra]

Hi @brianegan ,

I'm having the same issue of not updating the my View Model immediately after my Store is updated from an action executed within a Stream. I can see my store model gets updated, however it does not reflect on UI immediately.

I'm not sure what you meant by "

are you synchronously dispatching all of these actions

" i'm executing the following code to dispatch my action which updates the model:

`
void _loadLastDataFromStream(Store store, action, NextDispatcher next) async {
next(action);

try {
//keeps looping and receive data from API in a Stream
LoadLastDataStream().stream.listen(
(chats){
if(chats.length > 0)
store.dispatch(new SaveLastDataInModelAction(chats)); //This actually gets really called and Model get updated with the data
},
);

} catch (error) {
store.dispatch(new LoadDataFailAction(error.message));
}
}
`

Any idea?

[amercobra]

Hello @brianegan ,

After reading what you wrote more carefully I realized that dispatching my action when listening to a stream would not actually update the UI immediately, exactly as if I'm calling setState() multiple times as per your example.

But what's the solution? I'm listening to a Stream where it should update the UI each time I receive data from the Stream. I get my store state updated correctly as expected when dispatching the action with data from Stream, however UI doesn't get updated.

Thank you!