所以我现在正在学习一个教程,作者使用redux在实时数据库的帮助下实时更新数据。在redux文件中,他使用.on方法,如下所示:
const watchPersonData = () => {
return function(dispatch) {
firebase.database().ref("person").on("value", function(snapshot) {
var personData = snapshot.val();
var actionSetPersonData = setPersonData(personData);
dispatch(actionSetPersonData);
}, function(error) { console.log(error); });
}
};
但是,我想使用cloudfirestore,所以我尝试用onSnapshot方法转换这段代码。但是,用户未定义:
const watchPersonData = () => {
return function(dispatch){
db.collection('user').doc().onSnapshot(function(snap){
var personData = snap.val();
var actionSetPersonData = setPersonData(personData);
dispatch(actionSetPersonData);
})
}
};
目前我有一个名为“user”的集合,在这个集合中有一个自动生成id的文档(这就是doc()为空的原因),在这个文档中有一个名为username的字符串。知道为什么吗这个.props.personData.username在控制台中未定义?
整个应用程序redux文件:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import * as firebase from 'firebase';
const db = firebase.firestore;
var config = {
};
firebase.initializeApp(config);
const initialState = {
personData: { },
}
const reducer = (state = initialState, action) => {
switch(action.type){
case 'setPersonData':
return {Â ...state, personData: action.value};
default:
return state;
}
}
const store = createStore(reducer, applyMiddleware(thunkMiddleware));
const setPersonData = (personData) => {
return{
type: "setPersonData",
value: personData
};
};
const watchPersonData = () => {
return function(dispatch){
console.log('called')
db.collection('user').doc().onSnapshot(function(snap){
console.log(snap)
var personData = snap;
var actionSetPersonData = setPersonData(personData);
dispatch(actionSetPersonData);
})
}
};
export { setPersonData, watchPersonData};
export {Â store };
谢谢大家!提前!