Redux Hooks with useSelector and useDispatch - Why would you use this?

Question

I just converted a react component which had a separate file for the 'container' which contained the mapStateToProps / mapDispatchToProps connect wrapper implementation.

Now my GUI component is mixed with redux specific functions like useSelector and useDispatch. Now no props are being passed in.

This seems like the worst design pattern possible. Before the GUI component was a function of the props, regardless of whether they came from redux or from a parent control.

Easily testable, and very clear what properties the component depended on.

All this is gone!

Can anyone think of one benefit of using redux hooks? Maybe I am missing something.

Thanks

Answer 1

The only benefit is that you do not have to pass those props from parent to children all the way down. Seriously, that's the only benefit. So if it works do not refactor anything to use the hooks, unless you have a serious reason to do otherwise.

Answer 2

Even with the hooks syntax, you can still do 2 components: one that is connected and the other that receives everything in its props (and can be more easily tested). That's only a new syntax, you are not forced to mix everything in the same component.

The main advantage of Hooks is the possibility to write custom hooks. When it doesn't make sense for what you're doing, the advantage is small.