Firebase gets undefined from reducer, but state from reducer logs as a boolean

Question

I have a simple Switch component that toggles back and forth between true and false. I've wired it up in my actions to Set this boolean in a table in Firebase. Firebase says that 'first argument contains undefined in property'. However, when I log that specific prop, I can see that it logs as true and false as I switch it. The prop is 'sold'. All other props are Set just fine.

Here's the action creator that tries to Set to Firebase:

export const entrySave = ({ make, model, year, uid, image, sold }) => {
   const { currentUser } = firebase.auth();

   return (dispatch) => {
    firebase.database().ref(`/users/${currentUser.uid}/entries/${uid}`)
      .set({ make, model, year, image, sold })
         .then(() => {
            dispatch({ type: ENTRY_SAVE_SUCCESS });
         Actions.main({ type: 'reset' });
  });
 };
};

Here's the action creator that updates the change of this.props.sold:

export const entryUpdate = ({ prop, value }) => {
return {
type: ENTRY_UPDATE,
payload: { prop, value }

   };
  };

Here's the Switch:

console.log(this.props.sold);
//both logging 'this.props.sold' and the redux debugger show that 
//this.props.sold is toggling between true and false
return (
  <View>
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: 66 }}>
      <View>
        <Text style={styles.switchLabelStyle}>Mark As Sold</Text>
      </View>
      <View style={{ paddingRight: 20 }}>
        <Switch
          tintColor='#a6a7a8'
          onValueChange={value => this.props.entryUpdate({ prop: 
             'sold', value })}
          value={this.props.sold}
        />
      </View>
    </View>

And lower down:

const mapStateToProps = (state) => {
   const { make, model, year, sold } = state.entryForm;

   return { make, model, year, sold };
};

export default connect(mapStateToProps, { entryUpdate })(EmployeeForm);

And here's the reducer:

 const INITIAL_STATE = {
   make: '',
   model: '',
   year: '',
   image: '',
   sold: false,
   uid: '',
   loading: false;
 };

export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case ENTRY_UPDATE:
       return { ...state, [action.payload.prop]: action.payload.value };
     case ENTRY_CREATE:
       return INITIAL_STATE;
     case ENTRY_SAVE_SUCCESS:
       return INITIAL_STATE;
     case ENTRY_CLEAR:
       return INITIAL_STATE;

Anyone see what I'm missing? Thanks in advance!

Answer 1

Silly me...I forgot to include 'sold' as a prop in the parent component's mapStateToProps function.

const mapStateToProps = (state) => {
  const { make, model, year, image, sold } = state.entryForm;

  return { make, model, year, image, sold };
};