Question

我有一个简单的create react app，它有一个名为List的组件。

该List组件通过调度名为handleInitialData的redux操作

来在页面加载时加载一些数据。

我也有一个火力基地database，它有一些虚拟数据。而且我想用一个useeffect钩子加载该数据，该钩子调度将触发firebase函数从firebase获取数据的动作handleInitialData。

我是Firebase的新手，但据我了解，获取数据的方法是通过执行以下操作：

  listsRef.on("value", snapshot => {
     console.log(snapshot.val())
  })

这正是我在handleInitialData动作中所做的事情：

export const handleInitialData = () => async dispatch => {
  listsRef.on("value", snapshot => {
  dispatch(receiveLists(snapshot.val()))
  })
}

但这没有做任何事情。

实际上，它永远不会进入listsref.on的主体内部

这里有什么问题的想法吗？

这是我的组件：

const List = ({dispatch, addList, lists}) => {

  useEffect(() => {
    dispatch(handleInitialData())
  },[dispatch])


  return (
    <div>
      {lists.lists.map((x, i) => <p key={i}>{x.name}</p>)}
    </div>
  )
}

const mapStateToProps = ({lists}) => {
  return {
    lists,
  }
}

export default connect(mapStateToProps)(List);

我的列表减速器：

import {RECEIVE_LISTS} from '../actions/lists';

export default (state = {}, action) => {
  switch(action.type) {
    case RECEIVE_LISTS:
      return {
        ...state,
        ...action.lists
      }
    default:
      return state;
  }
}

我的Firebase设置：

var firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

firebase.analytics();

const databaseRef = firebase.database().ref();
export const listsRef = databaseRef.child("lists")

如何使用Redux从Firebase获取初始数据并做出反应？

0 个答案: