React-Redux connect example

connectExample.js

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);

// =>
const mapStateToProps = (state, ownProps) => {
return {
counter : state.counter,
someComponentValue : state.things[ownProps.someIdProp]
};
}

(Y)

This example helped me understand redux, thx.

thanks so much

Great example cheers!

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