Is it ok to pass the entire Redux state object into a React component?

user_5451285 0
Viewed 252

We have a component which needs access to Redux's store.

import React from 'react'
import { connect } from 'react-redux'

const Component = (props) => {
   ... code ...
}

We've connected this componet to the store using connect.

export default connect(mapStateToProps)(Component)

We now need to define mapStateToProps to pass as the first argument to connect.

const mapStateToProps = state => ({ ...state })

Why or why not is this an acceptable approach to injecting the data into the component? Would this make this component rerender in every situation that triggers a render?

Documentation and examples welcome.

Demo Application

FYI: I'm doing it for the second part of this video and considering listing it as the final solution. Would love to know Stack's thoughts on this code.

redux reactjs javascript
2 Answers

I think it is a bad idea to pass the entire Redux state into a component.

Although your component today uses all the variables of the store, in the future it can be a different situation.

Imagine that in the future you or other people create many new components that handle its vars in the store. You see? The first components would receive a lot unnecessarily data.

user_115447470

It will only rerender on the props the component actually uses, React is smart like that. However, my personal preference is to not pass the entire object, it might be easier to code, but is a lot less verbose.

const mapStateToProps = state => ({ ...state })

In this line of code, you have no idea what the component is going to use, which makes your code way less readable, I also like to have control over the naming, that's why I prefer

const mapStateToProps = state => ({ 
  primary,                                    
  secondary,
  myComponentActive: active                                   
})

Now, when someone is reading your code, he knows exactly what's going on.

This also gives you a better overview if you ever want to change over to React Hooks, omitting the mapStateToProps object. Even though there is still discussion whether Hooks are the future, I find it be very convenient. That is not of much use for your video, although you might discuss the possibility of changing over!

user_92036870
Related