Я пытаюсь создать простую аутентификацию с помощью 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
}