Trouble Using Actions In React-redux Presentational Component

I'm new to redux and having trouble wrapping my head around presentational and container components. Relevant stack: react v0.14.8 react-native v0.24.1 redux v3.5.2 react-redux v4

Solution 1:

Your container component is supposed to be a component and it must have a render function with the dumb/presentational components you want to render.

import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";


class LoginContainer extends React.Component {
    constructor(props){
      super(props);
    }
    render() {
        return (
          <LoginPage userData={this.props.userData}
              onSuccessfulLogin={this.props.onSuccessfulLogin}
              />
        )
    }
};

const mapDispatchToProps = (dispatch) => {
  return {
    onSuccessfulLogin: (userData) => {
      dispatch(UserActions.userLoggedIn(userData))
    }
  }
}

const mapStateToProps = (state) => {
  return {
    userData: state.userData
  }
}


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginPage);