Javascript: Passing valid parameters in function call and one turns undefined

Question

It's a React web app with Redux and Firebase. I've been finishing implementation of react-redux-i18n (multilingual support) when I hit this problem. The app supports two locales, let's say 'en' and 'pl'. Current locale is stored in state and in sync with firebase, that's the idea anyway and that's where I've encountered this strange behaviour: one of the 3 parameters, while present and valid before the call to the function turns undefined in the function that subsequently fails.

Here is the function I'm calling:

export const SaveLanguageToDb = (uid, user, lang) => {
  console.log('in function:', uid, user)
  database.ref(`users/${uid}`).update({ currentLanguage: lang, ...user })
  .then(() => {
    return
  })
  .catch(e => { console.log('Error:', e) })
}

The function takes 3 parameters:

• uid: string,
• user: object,
• lang: string

and it is called from two locations:

1. On app load it gets user data incl. locale from firebase and saves it back to firebase after validation in case a locale was not supported and has fallen back to 'en'. It's possible if support was removed for locale that user has stored previously. This call works correctly.
2. From the language changer component when user clicks on a flag pic to change locale. This call fails due to user object coming in undefined.

Here is the component the function is called from:

import React from 'react'
import { connect } from 'react-redux'
import en from '../../../public/images/United_Kingdom.png'
import pl from '../../../public/images/Poland.png'
import { SaveLanguageToDb } from '../../actions/user'
import { setLocale, } from 'react-redux-i18n'

export const LingoFlags = ({ uid, user, SaveLanguageToDb, setLocale }) => {
  console.log('before call:', uid, user)
  return (
  <div>
    <button
      className="button button--link"  
      onClick={() => {
        setLocale('en')
        SaveLanguageToDb(uid, user, 'en')
      }}
    >
      <img src={en} alt="en" />
    </button>
    <button
      className="button button--link"  
      onClick={() => {
        console.log('onClick:', uid, user)
        setLocale('pl')
        SaveLanguageToDb(uid, user, 'pl')
      }}
    >
      <img src={pl} alt="pl" />
    </button>
  </div>
)}

const matchStateToProps = (state) => ({
  uid: state.auth.uid,
  user: state.user,
})

const mapDispatchToProps = (dispatch) => ({
  SaveLanguageToDb: (lang) => dispatch(SaveLanguageToDb(lang)),
  setLocale: (lang) => dispatch(setLocale(lang))
}) 

export default connect(matchStateToProps, mapDispatchToProps)(LingoFlags)

The console.log s confirm that I have the correct data just before the call and yet in the called function the user object is undefined while uid string is passed correctly as shown below:

before call : 06N6iv34gZfyWeF {displayName: "Some Name", email: "somenamel@gmail.com", emailVerified: true, numberOfVisits: 102, firstVisitAt: 1591402705798, …} LingoFlags.js:9
onClick : 06N6iv34gZfyWeF {displayName: "Some Name", email: "somename@gmail.com", emailVerified: true, numberOfVisits: 102, firstVisitAt: 1591402705798, …} LingoFlags.js:24

action @@i18n/SET_LOCALE @ 19:13:40.651 redux-logger.js:1

in function : 06N6iv34gZfyWeF undefined user.js:41

Uncaught Error: Reference.update failed: First argument contains undefined...

I hope that is enough info for someone to get interested in this mystery. Thank you.

Answer 1

According to the mapDispatchToProps 'SaveLanguageToDb' receives only 1 argument. Is that might be the issue?