0

Since redux has this mega store of all the states in 1 place i.e root-reducer, how is it different from something like storing all the states if every component in App.js which I'm assuming is the parent of all components (and then of course drilling your props to children)

Now some may argue prop drilling is bad , I get it but is it the only problem that Redux solves ?

More importantly,

Like what happens to component updates and all that ? Does Redux re-render all the components if my mapStateToProps just uses say, states of cart-item-reducer ? (Coz doing it in App.js definitely would)

dispatch for instance spams every single reducer with the action passed to it , just like changing the state of parent component re-renders every single child component ?

I find it hard to understand

Tilak Madichetti
  • 4,110
  • 5
  • 34
  • 52
  • states obtained from useReducer won't trigger re-render. https://codesandbox.io/s/eventemitter-and-react-84eey?file=/src/Title.js – glinda93 Jul 14 '20 at 13:54
  • I'd really like to hear your opinion in my post (i think your post is related to mine) : https://stackoverflow.com/questions/62827419/event-driven-approach-in-react – glinda93 Jul 14 '20 at 13:55
  • i took an example of User Reducer just like Cart Item Reducer or any such, not `useReducer` @bravemaster – Tilak Madichetti Jul 14 '20 at 13:56
  • i changed my example now:) to avoid confusion – Tilak Madichetti Jul 14 '20 at 13:58
  • The reason you use Redux is, like any framework, it solves a lot of the problems and provides useful features you would otherwise have to deal with yourself. That's it. You could store everything in App.js, sure. But any knowledgable dev would likely see that as a naive implementation and would almost certainly code up a module to manage state, which they could use across projects. But if your website is a tiny throw away with just a little state (like a user object), my personal experience, Redux is major overkill. Store your state in App.js and move along. Move to Redux when needed. – Tim Consolazio Jul 14 '20 at 14:08
  • Yeah but could you answer the second half of the question which is more important. Please? – Tilak Madichetti Jul 14 '20 at 14:10

2 Answers2

2

The core idea behind Redux is not bypassing component drilling. The idea behind Redux is as a high-level wrapper around persistent storage.

The alternative to Redux is not storing states in App.js. Storing states in App.js is the alternative to storing states in App.js (actually, if this is what you use Redux for you're way overcomplicating how you use variebles).

The alternative to Redux is manually storing data in Localstorage or Cookies or SQLite etc. Redux allows you to simply use persistent storage without worrying about the low level technical details.

What is persistent storage? It is when your data is saved on disk and still exist after the user quits the web browser.

slebetman
  • 109,858
  • 19
  • 140
  • 171
1

You are right that from perspective of single source of truth it will be similar but redux gives much more. For example you have standardised way of updating store.

What is more as you realised that passing props from root component to most nested components might be bad. In bigger application often developers forget to pass some of them and it is hard to find on which level props is missing. Redux has a lot of developers tools which may help you to observe changes in store. Without redux it will be hard to monitor such changes.

Maybe it is not part of redux but also it has optimisation for rerendering that you mentioned. There is addon for redux named reselect https://github.com/reduxjs/reselect which will not do any rerenders/recalculations if not needed.

kadash
  • 282
  • 1
  • 11