I understand React and Redux (at least think that I do). But the combination using the react-redux Binding package is a bit confusing to me.


The first thing that disturb me is the motivation to use connect. Why not just use store.subscribe(()=>{this.setState({})}) from the root Component?

Since the store is Global you can dispatch an action from any component and get the current state from any competent even deeply nested in hierarchy. So we do not need the react-redux for that although I can see how using react-redux can make it more strict and secure by binding only the properties that we need

This is the reason from the redux page to use the package: http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components

React Redux makes many performance optimizations that are hard to do by hand

On the other hand React has Virtual Dom which: https://en.wikipedia.org/wiki/React_(JavaScript_library)#Virtual_DOM

React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render sub components that actually change.

So it seems to me that the Virtual Dom and react-redux may do the same stuff. This violates the Single responsibility principle. Why do we need the extra complexity?

Can you clear this issue for me?

  • 1
  • 1
    "This violates the Single responsibility principle." -- the SRP applies to your code, not other people's frameworks. At it's core, it's about managing changes in order to concentrate likely changes in as few places as possible and reducing the likelihood that a change will affect unrelated code. You shouldn't be changing external frameworks, so the SRP doesn't apply to them. – Jules Aug 30 '17 at 9:16

react-redux at the end provides a convenient way of accessing the store from any component (actually, as the documentation says, only container components should connect to the store). This means that any component that wants to get data can do it without relying on a parent component feeding it with props.

The alternative that you suggest ("Why not just use store.subscribe(()=>{ this.setState({}) }) from the root Component?") breaks down if you have a deep hierarchy of components. In that case, the root component gets the data, and has to pass it through a chain of children. In that case, you don't gain much over just using the normal setState.

Also with connect you can select which parts of the state you are accessing to, making it clearer what data each component uses.

In the end, redux is not needed for every React app, that depends on your use case. But if you are using React and Redux, that library makes combining them easier than just doing it yourself.

  • Thanks for the answer. I accepted although I still think react-redux creates too much complexity. About store.subscribe(()=>{ this.setState({}) }) If store is global. We would not have any problem accessing the state for deep hierarchy of components – Natan Rubinstein Sep 3 '17 at 8:05
  • 1
    for small apps it's overkill, but if you have a bigger one, it creates a lot of structure and you can really benefit from having one way of accessing data. – Mario F Sep 3 '17 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.