Last active
June 24, 2024 09:43
-
-
Save gaearon/1d19088790e70ac32ea636c025ba424e to your computer and use it in GitHub Desktop.
connect.js explained
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// connect() is a function that injects Redux-related props into your component. | |
// You can inject data and callbacks that change that data by dispatching actions. | |
function connect(mapStateToProps, mapDispatchToProps) { | |
// It lets us inject component as the last step so people can use it as a decorator. | |
// Generally you don't need to worry about it. | |
return function (WrappedComponent) { | |
// It returns a component | |
return class extends React.Component { | |
render() { | |
return ( | |
// that renders your component | |
<WrappedComponent | |
{/* with its props */} | |
{...this.props} | |
{/* and additional props calculated from Redux store */} | |
{...mapStateToProps(store.getState(), this.props)} | |
{...mapDispatchToProps(store.dispatch, this.props)} | |
/> | |
) | |
} | |
componentDidMount() { | |
// it remembers to subscribe to the store so it doesn't miss updates | |
this.unsubscribe = store.subscribe(this.handleChange.bind(this)) | |
} | |
componentWillUnmount() { | |
// and unsubscribe later | |
this.unsubscribe() | |
} | |
handleChange() { | |
// and whenever the store state changes, it re-renders. | |
this.forceUpdate() | |
} | |
} | |
} | |
} | |
// This is not the real implementation but a mental model. | |
// It skips the question of where we get the "store" from (answer: <Provider> puts it in React context) | |
// and it skips any performance optimizations (real connect() makes sure we don't re-render in vain). | |
// The purpose of connect() is that you don't have to think about | |
// subscribing to the store or perf optimizations yourself, and | |
// instead you can specify how to get props based on Redux store state: | |
const ConnectedCounter = connect( | |
// Given Redux state, return props | |
state => ({ | |
value: state.counter, | |
}), | |
// Given Redux dispatch, return callback props | |
dispatch => ({ | |
onIncrement() { | |
dispatch({ type: 'INCREMENT' }) | |
} | |
}) | |
)(Counter) |
Thanks, this mental model helping me a lot while learning react with redux :)
thanks @gaearon
Thank you 🚀🚀🚀
Thank you so much. It was so helpful.
thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank You That was a clear explanation !!