What's wrong with my Redux Thunk It's being called alright but fail for some reason I cant get

Viewed 27

I'm new to this and read many tutorial and docs about Redux Thunk and Higher Order HOC Components and trying to wire together this but I cant understand what wrong here.

This image show what's happening that my inner Thunk function save() is not called for some reason

enter image description here

It works if I change the return withFirebase(save); to return save; but I need the Firebase Context so how can I solve this and why does react-thunk care about the withFirebase?

This is the Action:

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,
});

function saveUser() {
    return dispatch => {
        function save({ firebase }) {
            const userRef = firebase.userDoc(firebase.auth.currentUser.uid);
            dispatch(saveUserStart());
            firebase.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(firebase.auth.currentUser));
                    console.log(`Transaction successfully committed role(s): ${newRoles}`);
                })
                .catch(error => {
                    dispatch(saveUserFailure(error));
                    console.log(`Transaction failed committed role(s): ${error}`);
                });
        }

        return withFirebase(save);
    };
}

export default saveUser;
0 Answers
Related