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

Question

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.

Answer 1

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.