Is dispatching Redux actions considered expensive?

Question

I\'ve been using the React - Redux - Typescript stack for a while and I\'m loving it so far. However, since I\'m quite new to Redux, I\'ve been wondering about this certain topi

Answer 1

The cost of actually dispatching an action is:

• Passing the action through each middleware
• Executing the root reducer function, which is probably split up into several slice reducers if you're using combineReducers()
• Calling all of the store subscription callbacks

Generally, the middleware and the reducer logic are not the bottlenecks - it's updating the UI that can be expensive. With React-Redux, each connected component instance is a separate subscriber. If you have a connected List with 10000 connected ListItems, that's 10001 subscribers.

The Redux FAQ has entries discussing app performance and scalability, and ways to cut down on subscriber notifications.

For a form specifically, it's unlikely that the rest of the app needs to be updated on every keystroke in the form. For that, it's very reasonable to debounce the dispatch. My blog post Practical Redux, Part 7: Form Change Handling and Data Editing shows a reusable component that can wrap inputs or forms to enable fast updates in the UI, while also debouncing the dispatch of a Redux action.