Почему firebase.auth () не работает и я не могу получить ответы от моего редуктора? - PullRequest
0 голосов
/ 07 апреля 2020

Я пытаюсь создать простую аутентификацию с помощью Redux и firebase) У меня есть пара вопросов, это мой компонент с профилем создания для пользователя

    import { createUser } from '../../store/actions/createUser'

    export const CreateProfile = ({
        showQuickAddUser,
        setShowQuickAddUser
    }) => {
        const dispatch = useDispatch()

            return (
                <div ....
                                <button
                                type="button"
                                className="add-user__submit"
                                onClick={ () => {
                                    setShowQuickAddUser(false);
                                    dispatch(createUser({
                                        firstName,
                                        lastName,
                                        email,
                                        password,
                                        rights
                                    }))
                                }}
                            >
                                Add User
                            </button>

, и это мой компонент authUser

import { authUser } from '../../store/actions/authUser'

export const SignIn = ({ shouldShow = true }) => {
    const dispatch = useDispatch()

    return (
        <div className="container mt-5 p-5">....
                                <button 
                                onClick={(e) => {
                                    e.preventDefault()
                                    authUser( {email, password} )}                                  
                                }
                                >
                                    Login
                                </button>
..............................................
const mapDispatchToProps = ({ dispatch }) => {
    return {
        authUser: user => dispatch(authUser(user))
    }
}

export default connect(null, mapDispatchToProps)(SignIn) 

и мои действия *. js file

export const authUser = (credentials) => {
    console.log(credentials)
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        firebase
        .auth()
        .signInWithEmailAndPassword(
            credentials.email,
            credentials.password
            )
            .then(credentials =>
            dispatch({ 
                type: LOGIN_SUCCESS,
                payload: credentials }))

            .catch((err) => dispatch({ type: LOGIN_ERROR }))
        }
    }

Я пытаюсь использовать useDispatch () в компоненте authUser, как этот

                                <button 
                                onClick={(e) => {
                                    e.preventDefault()
                                    dispatch(authUser({email, password}))}                                  
                                }
                                >
                                    Login
                                </button>

**** но получил ошибку Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное программное обеспечение для действий asyn c. ПОЧЕМУ ??? в моем createComponent все работает хорошо и добавляет пользователя в мою базу данных ****

Но главный вопрос - почему мой редуктор не отвечает мне ??? он просто возвращает учетные данные в консоли и в конце (((у меня кончился идеас (спасибо за помощь)

это мой редуктор

const initState = {
    authError: null
}

export const authReducer = (state = initState, action) => {
    switch (action.type) {
        case 'LOGIN_ERROR':
            console.log('login error');
            return {
                ...state,
                authError: 'Login failed'
            }

        case 'LOGIN_SUCCESS':
            console.log('login success');
            return {
                ...state,
                authError: null
            }
...