reactjsredux-sagaredux-actions

redux-logger not showing action names suddenly only "object, object"


I learn react and try to get Redux to work so I use the Redux-logger. When dispatching two actions from App.js it works as the top image show "ALBUME_DATA_LOADED".

Then I make a dispatch from from another place and get this output:

enter image description here

I'm not sure I sent that "object, object" action I place breakpoint and console log and it's strange the react-logger it catching an action that I dont think I sent..

Any idea?

Here is the action types I use in the below code as userActionTypes:

File user.types.js:

export const userActionTypes = {
    SAVE_USER_START: 'SAVE_USER_START',
    SAVE_USER_SUCCESS: 'SAVE_USER_SUCCESS',
    SAVE_USER_FAILURE: 'SAVE_USER_FAILURE',
};

Here is the action:

File user.actions.js;

import { userActionTypes } from './user.types';
import { withFirebase } from '../../firebase';
import * as ROLES from '../../constants/roles';

const saveUserStart = () => ({
    type: userActionTypes.SAVE_USER_START,
});

const saveUserSuccess = user => ({
    type: userActionTypes.SAVE_USER_SUCCESS,
    payload: user,
});

const saveUserFailure = errMsg => ({
    type: userActionTypes.SAVE_USER_FAILURE,
    payload: errMsg,
});

const asyncSaveUser = ({ firestore }) => {
    return async dispatch => {
        const userRef = firestore.userDoc(firestore.auth.currentUser.uid);
        dispatch(saveUserStart());
        firestore.db
            .runTransaction(transaction => {
                // This code may get re-run multiple times if there are conflicts.
                return transaction.get(userRef).then(doc => {
                    if (!doc.exists) {
                        return Promise.reject('Transaction failed: User dont exist!');
                    }
                    const newRoles = doc.data().roles;
                    // new roll
                    newRoles.push(ROLES.USER);
                    // remove roll
                    newRoles.splice(newRoles.indexOf('ANONYMOUS'), 1);
                    // save it back
                    transaction.update(userRef, { roles: newRoles });
                    return newRoles;
                });
            })
            .then(newRoles => {
                dispatch(saveUserSuccess());
                console.log(`Transaction successfully committed role(s): ${newRoles}`);
            })
            .catch(error => {
                dispatch(saveUserFailure(error));
                console.log(error);
            });
    };
};

export default withFirebase(asyncSaveUser);

Solution

  • The reason for this is your mapDispatchToProps.

    const mapDispatchToProps = dispatch => ({
      saveUser: () => dispatch(asyncSaveUser())
    }); 
    

    asyncSaveUser() is not an action creator.