Question

因此，我目前正在关注一个教程，作者正在其中使用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); });
  }
};

但是，我想使用Cloud Firestore，因此我尝试使用onSnapshot方法转换此代码。但是，用户是未定义的：

const watchPersonData = () => {
  return function(dispatch){



    db.collection('user').doc().onSnapshot(function(snap){



    var personData = snap.val();
    var actionSetPersonData = setPersonData(personData);
    dispatch(actionSetPersonData);

  })

  }
};

当前，我有一个名为“用户”的集合，并且在该集合中有一个具有自动生成的ID的文档（这就是doc（）为空的原因），在该文档中有一个名为username的字符串。有什么想法为什么在控制台中未定义this.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 = {
    //config data for firebase
  };

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 };

谢谢大家！提前！

Answer 1

您是否要访问用户集中的特定用户文档？您没有指定一个文件ID，我可以肯定它会导致您的未定义用户。

您可以直接在集合上调用onSnapshot并接收集合更新（例如添加了另一个文档），也可以像在进行操作一样在特定文档上调用它，并在该文档更改时进行更新。一种简单的测试方法是，通过doc参数将集合中的ID固定化，然后订阅doc更改并登录到控制台（例如“ doc changes”），然后在firestorm控制台中进行手动更改。

Redux Firestore onSnapshot

1 个答案: