CODEWITHSUNDEEP
reactjsreact-nativereact-redux
Brian Ruchiadi
Brian Ruchiadi

Reputation: 361

mapDispatchToProps() in Connect() must return a plain object

This is LoginScreenContainer.js

import React from 'react'
import { connect } from 'react-redux'
import LoginScreen from '../components/LoginScreen.js'
import * as AUTH_ACTIONS from '../actions/auth.js'

const mapStateToProps = state => ({
    loggedIn: state.AUTH.loggedIn
})

const mapDispatchToProps = (dispatch) => {
    loginDefault: (username , password) => {
        dispatch(AUTH_ACTIONS.actions.loginDefault(username, password))
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

This is actions/auth.js

import types from '../utilities/types.js'

export const actions = {
    loginDefault: (username, password) => ({
        type: types.LOGIN_DEFAULT,
        meta: {
            type: 'api',
            path: '/users/token',
            method: 'POST'
        },
        payload: {username, password}
    })
};

export default actions

What is the best way to debug this. I cannot figure out which part goes wrong. I have been thinking this for 3 days. Guidance and help needed. Thank you.

(I am fairly new to react)

Upvotes: 0

Views: 3100

Answers (2)

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

I might be wrong but I think that mapDispatchToProps is incorrect: 

const mapDispatchToProps = () => ({
  loginDefault: AUTH_ACTIONS.actions.loginDefault,
})

And then in your event handler: 

this.props.loginDefault(username, password)

Upvotes: 1

Icepickle
Icepickle

Reputation: 12796

Your dispatch lacks the return value, you should change it to

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    loginDefault: (username , password) => {
        dispatch(AUTH_ACTIONS.actions.loginDefault(username, password))
    }
} ) // <- forgot closing of the wrapping with ) here

This is due to the nature of the arrow functions, and you seem to do it correctly for the state to props, so I believe it's a small oversight.

So, an arrow function that has this

const sample = argument => { return { test: '1' } }

equals to

const sample = argument => ( { test: '1' } );

But not to

const sample = argument => { test: '1' };

So if you use an arrow function, and you wish to return an object, you should either return it, or wrap it with ( ) brackets

Upvotes: 5

Related Questions