Как получить исходные данные из firebase с помощью приставки и реагировать?

Question

У меня есть простой create react app, у него есть компонент с именем List.

. Этот компонент List загружает некоторые данные при загрузке страницы, отправляя действие с избыточностью, называемое handleInitialData

* 1007. * У меня также есть база данных database, у нее есть несколько фиктивных данных. И я хочу загрузить эти данные с помощью useeffect ловушки, которая отправляет действие handleInitialData, которое должно вызвать функцию firebase, чтобы получить данные из базы firebase.

Я новичок в базе данных 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")