I've done all the setup for redux and redux-firebase, but when I call the signIn and signUp functions I receive only the first log (console.log(called signIn/signUp)) and not the second log so it doesn't enter the return and I don't understand why.
this is Index:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { getFirebase, ReactReduxFirebaseProvider } from "react-redux-firebase";
import firebase from "./config/firebaseConfig";
import { createFirestoreInstance } from "redux-firestore";
import { useSelector } from "react-redux";
import { isLoaded } from "react-redux-firebase";
const store = createStore(
rootReducer,
applyMiddleware(thunk.withExtraArgument({ getFirebase }))
);
const rrfProps = {
firebase,
config: {},
dispatch: store.dispatch,
createFirestoreInstance,
};
function AuthIsLoaded({ children }) {
const auth = useSelector(state => state.firebase.auth);
if (!isLoaded(auth))
return (
<div className="text-center">
<div
className="spinner-grow text-primary"
style={{ width: "7rem", height: "7rem" }}
role="status"
>
<span className="sr-only">Loading...</span>
</div>
</div>
);
return children;
}
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<AuthIsLoaded>
<App />
</AuthIsLoaded>
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById("root")
);
this is the reducer:
import { combineReducers } from "redux";
import { firebaseReducer } from "react-redux-firebase";
import { firestoreReducer } from "redux-firestore";
import authReducer from "./authReducer";
const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer,
auth: authReducer
});
export default rootReducer;
this is authReducer:
import { toast } from "react-toastify";
const authReducer = (state = {}, action) => {
switch (action.type) {
case "SIGN_IN":
toast("Welcome back..");
return state;
case "SIGN_IN_ERR":
toast.error("Sign in error...");
return state;
case "SIGN_OUT":
toast("You signed out..");
return state;
case "SIGN_UP":
toast("Welcome..");
return state;
case "SIGN_UP_ERR":
toast.error("Sign up error...");
return state;
default:
return state;
}
};
export default authReducer;
this is authAction:
export const signIn = creds => {
console.log("called signin,",creds);
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
console.log("second log");
firebase
.auth()
.signInWithEmailAndPassword(creds.email, creds.password)
.then((user) => {
console.log(user);
dispatch({ type: "SIGN_IN" });
console.log("finish signIn");
})
.catch(err => {
dispatch({ type: "SIGN_IN_ERR" }, err);
console.log("error signIn");
});
};
};
export const signOut = () => {
console.log("called signOut");
return (dispatch, getState, { getFirebase }) => {
console.log("second log");
const firebase = getFirebase();
firebase
.auth()
.signOut()
.then(() => {
dispatch({ type: "SIGN_OUT" });
console.log("finish signOut");
});
};
};
export const signUp = creds => {
console.log("called signUp,",creds);
return (dispatch, getState, { getFirebase }) => {
console.log("second log");
const firebase = getFirebase();
firebase
.auth()
.createUserWithEmailAndPassword(creds.email, creds.password)
.then((user) => {
console.log(user);
dispatch({ type: "SIGN_UP" });
console.log("ok signUp");
})
.catch(err => {
dispatch({ type: "SIGN_UP_ERR" }, err);
console.log("error signUp");
});
};
};