facing slowness in user actions done through thunk middleware

[shishirarora3]

Hi,

Anyone facing slowness in user actions. Sometimes a user action might dispatch many actions. Every action causes rerender of react.

const setAction()=>{
return async (dispatch, getState) =>{
     await dispatch(setAction1);
      dispatch(setNormalAction1);
      dispatch(setNormalAction2);
     await dispatch(setAction2);
     await dispatch(setAction2);
}
}

I am using above pattern of actions with redux-thunk.

One option of redux-batched-subscribe in middleware helped in batching concurrent actions( setNormalAction*) and hence saved some renders. But still the performance is bad because of sequence required in thunk actions(setAction1*).

Any other approaches, you are following to scale this?

[comerc]

Promise.all() may be

[shishirarora3]

Promise.all() will not work for actions depending on sequence. await fixes issue of bringing actions in sequence.

[comerc]

We have a problem with promises > Advanced mistake #3: promises vs promise factories

[phpeek]

@shishirarora3

Please format Your code so it's easier to read and add syntax highlighting.

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting

Can You give more info on Your use case ?

Do You use connect() to connect component to state ?

Which component is being rerendered ? Is it Your component or one of the components that come with RSK ?

[shishirarora3]

Do You use connect() to connect component to state ?
yes

Which component is being rerendered ? Is it Your component or one of the components that come with RSK ?

No, but mine is a normal connected component with redux-thunk middleware.

[phpeek]

No, but mine is a normal connected component with redux-thunk middleware.

Gotya.

In that case You'll see rerender of Your component every time You dispatch an action which changes part of state that component is connected to.

What I usually do is extract logic contained in actions to methods and execute them in necessary order. Then when all data is ready, dispatching single action with this data.

This might not be the case for You, as from what I see, Your actions depend on data in state set by other actions. In that case You might consider connecting Your component to part of state that is being changed by the last dispatched action. But again, this is very dependent on the way how Your state is designed.

I would need to have more specific examples, so that I can fully understand Your use case.

This is not an issue of RSK itself, it's just how redux works. ;)

[shishirarora3]

I guess your solution is similar to redux-batched-subscribe and its giving good improvement.

[ulani]

@shishirarora3 thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.