Skip to content

Instantly share code, notes, and snippets.

@markerikson
Last active March 5, 2024 01:24
Show Gist options
  • Save markerikson/121c77a01c453466361a9c6434a08620 to your computer and use it in GitHub Desktop.
Save markerikson/121c77a01c453466361a9c6434a08620 to your computer and use it in GitHub Desktop.
React-Redux connect example
import {action1, action2} from "myActions";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
const mapStateToProps = (state, ownProps) = {
return {
counter : state.counter,
someComponentValue : state.things[ownProps.someIdProp]
};
}
const mapDispatchToProps = (dispatch) => {
return {
// same effect
firstAction : () => dispatch(action1()),
secondAction : bindActionCreators(action2, dispatch)
}
};
const MyStatelessComponent = (props) => {
const {counter, someComponentValue} = props;
const {firstAction, secondAction} = props;
return (
<div>
<div>Counter: {counter}</div>
<div>Other value: {someComponentValue}</div>
<button onClick={firstAction}>First Button</button>
<button onClick={secondAction}>Second Button</button>
</div>
);
};
const WrappedComponent = connect(mapStateToProps, mapDispatchToProps)(MyStatelessComponent);
@wgolledge
Copy link

Great example cheers!

@ostannya
Copy link

ostannya commented Jun 9, 2021

would be cool also to add something like export WrappedComponent at the end

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment