CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
OscarDev
OscarDev

Reputation: 977

Why are my User.props always undefined? React-Native and Redux

I'm working with React-Native and Redux.

I need to access my User state on react redux after an action. I try this with a simple console.log after the action on my Component (console.log(this.props.User)) but it is always undefined.

This is my Combine Reducer:

import { combineReducers } from 'redux'; import User from './userReducer';

export default combineReducers({
    User });

This is my User Reducer:

import {
    REGISTER_USER,
    SIGNIN_USER } from '../types';

export default function(state=INITIAL_STATE, action){
    switch(action.type){

       case  SIGNIN_USER:
       return {
        ...state,
        userData:{
                 uid: action.payload.localId || false,
                 token: action.payload.idToken || false,
                 refreshToken: action.payload.refreshToken || false,
        }
    };
    break;

        default:
            return state
    } }

This is my action:

export function signIn(data){
    const request = axios({
        method:'POST',
        url:SIGNIN, 
        data:{
            email: data.email,
            password: data.password,
            returnSecureToken:true 
        },
        headers:{
            "Content-Type":"application/json"
        }
        }).then(response => {
            return response.data
        }).catch( e=> {
            console.log(e)
        });

    return {
        type: SIGNIN_USER,
        payload: request
    }
}

Component where I try to get the state after action:

import { connect } from 'react-redux';
import { signIn } from '../Store/Actions/userActions';
import { bindActionCreators } from 'redux';


class LoginComponent extends React.Component {


 state = {
    email:'',
    password:''
  };

      signInUser () {

        try {
          this.props.signIn(this.state).then( () => {
           **console.log(this.props.User)**
          })
        } catch (error) {
          console.log(error)
        }
      }

}

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

const mapDispatchToProps =( dispatch ) => {
  return bindActionCreators({signIn}, dispatch)
}

export default connect(mapDispatchToProps,mapDispatchToProps)(LoginComponent);

The response on log just is: undefined

What is my mistake?? Thanks!

Upvotes: 2

Views: 415

Answers (1)

It worked yesterday.
It worked yesterday.

Reputation: 4617

The order of the arguments that you are passing into connect method is wrong it expects mapStateToProps first and mapDispatchToProps as second parameter. So your code has to be export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);

Here is the signature 

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

Upvotes: 0

Related Questions