我正在尝试使用 React Native/Redux/Firebase 进行登录过程,但遇到了一些问题......
我尝试实现 onAuthStateChanged 来分派(dispatch)操作,但它没有按我想要的方式工作。
它适用于两种情况:
1 - 我直接在组件中实现 onAuthStateChanged ,如下所示:
componentDidMount() {
firebaseAuth.onAuthStateChanged()
.then((user) => {
if (user) {
Actions.home();
} else {
Actions.login();
}
});
}
2 - 我将其作为带有 redux-thunk 的操作来实现,但没有调度(但随后我无法调度操作并重定向到正确的路线)
export const isAuthenticated = () => {
firebaseAuth.onAuthStateChanged()
.then((user) => {
if (user) {
console.log("launch.action#isAuthenticated - user already connected");
} else {
console.log("launch.action#isAuthenticated - user not connected");
}
});
};
我想做的是这个(但不起作用):
export const isAuthenticated = () => {
return (dispatch) => {
firebaseAuth.onAuthStateChanged()
.then((user) => {
console.log('user', user);
if (user) {
console.log("launch.action#isAuthenticated - user already connected");
dispatch(isUserConnected(true));
} else {
console.log("launch.action#isAuthenticated - user not connected");
dispatch(isUserNotConnected(true));
}
});
};
};
有人可以解释一下为什么它不适用于调度吗?
谢谢!
最佳答案
有两件事:
使用一个函数(例如,
isUserConnected
)并将值设置为true
或false
(而不是使用两个函数)不同的函数,isUserNotConnected
和isUserConnected
,就像您当前一样)按照 firebase documentation 将
firebaseAuth
更改为firebase.auth()
试试这个。
(这对我有用)
在 Redux 中(操作):
// Firebase
import firebase from 'firebase';
// Redux Function
export const testFirebaseInRedux = () => {
return (dispatch, getState) => {
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
console.log("testFirebaseInRedux: logged in");
dispatch(isUserConnected(true));
} else {
console.log("testFirebaseInRedux: not logged in");
dispatch(isUserConnected(false));
}
})
}
}
export const isUserConnected = (payloadToSet) => {
return {
type: 'IS_USER_CONNECTED',
payload: payloadToSet
}
}
在 Redux( reducer )中:
export default function (state=initialState, action) {
switch(action.type) {
case 'IS_USER_CONNECTED':
return {
...state,
isUserConnected: action.payload
}
default:
return {
...state
}
}
}
组件:
// Libraries
import React from 'react';
// Redux
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {testFirebaseInRedux} from './../actions/index.js';
class YourComponent extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.testFirebaseInRedux()
}
}
function mapStateToProps(state) {
return {
user: state.user
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({
testFirebaseInRedux: testFirebaseInRedux,
}, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps)(YourComponent);
关于firebase - React Native/Redux/Firebase - onAuthStateChanged 未调度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47851426/