Menu
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.
405
Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state. Using local component state is fine.
Yes, it's optional as we could store a string in the state and render the component conditionally but in some cases, it is simpler to just store the component in the state.
Sending state/props to another component using the onClick event: So first we store the state/props into the parent component i.e in which component where we trigger the onClick event. Then to pass the state into another component, we simply pass it as a prop.
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.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
