How do I know if I need to use redux in a reactJS app or not?
Need I think is the wrong word to use, when it would be best to use though I think would be anytime you find yourself passing state through another component to get to the next. Though there are some that might just reach for Redux anytime your app is going to need some state.
Since React Hooks now being a thing, or the context api, etc, there are multipul ways for handing state with React.
Redux is incrediably useful anytime for state management, speciall with the Redux-Thunk middleware, but its really up to you when and where you feel you will want it.
- You have complex state and you want to make it much simpler to understand and deal with.
- You want to make the app easier to test.
- You want access to the powerful debugging toolset that Redux has facilitated.
- You want to serialize the entire state for some reason (eg you may want the user to be able to close their browser, then when they open it again, bring the app back to the exact same state they left it in).
There are quite a lot of other reasons for using it. It is, fairly often, a good choice. Not generally when you’re starting out though, it’s easier to grok once you can recognise situations where it would be useful.
It has extremely restrictive constraints: you have to write your app a specific way. It is more code to write, in general quite a lot more. The code is generally quite repetitive.
In addition to the points made above I find redux useful with respect to react when I do not want to traverse a complex parent child tree of components just to get to 1 or 2 variables that I may need, simply just connect to the redux store and access it, a good example is authentication, instead of hitting the backend end auth api from different components that require authentication info every time, I just hit the api once in the root route and then store the info in the store, now if any component needs to check auth, I can just read it from the redux store, there are other useful cases too. One drawback is that presentational components don’t have direct access to the store.
Thanks for the answers!
I think I wait to learn redux now. But I am about to code a project that I think require me to send variables to alot of components, not only from parent to childs. But i am not sure about this, do i need to “paint” the whole websites structure before starting or something?
Would I be able to do this project without redux?
Also, can the users access the Store? As mentioned with auth data saved in redux, is that “safe”?
Sure, but isn’t that the distinction of a presentational component, that they have no state?
Well, redux connected react components always get or send their store information via props and not state, even if they are stateful (aka container) components, the presentational components also receive their information via props, most often from a container parent component passing it’s state information down as props. Typically, what i find myself doing is passing the store information that I may need in the presentational component via a connected (stateful) parent component, that’s what I meant by having direct access to the store would be nice to have, but considering that presentational components have limited to no access to the life cycle, that would be a whole other can of worms I guess.
@jtl, not sure if you’d need redux, no idea what your project is, but typically, I’d say, if you don’t need it, no need to add any more complexity.
BTW, I highly recommend watching the next two free video series, perhaps even multiple times. Be sure to check out the captions and commentary too.
Also BTW, don’t worry if the first four videos in the first series are confusing: he starts coding it all from scratch in video 5.