Question

const listRef = firebase.database().ref();

const reducer = (state = {}, action) => {
  switch (action.type) {
    case: "GET_LIST" : {
      const { list } = action;

      return { list };
    };
    case: "ADD_ELEMENT" : {
      const { elementId } = action;

      return { ...state, [elementId]: true };
    };
    default : return state;
  };
};

const getList = list => ({
  type: "GET_LIST", list
});

const addElement = elementId => ({
  type: "ADD_ELEMENT", elementId
})

const getListFromDb = () =>
  async dispatch => listRef.once("value", snap => {
    dispatch(
      getList(
        list
      )
    );
  });

const listenToElementAdded = () =>
  async dispatch => listRef.on("child_added", ({ key: elementId }) => {
    dispatch(
      addElement(
        element
      )
    );
  });

const addElementToDb = () =>
  async dispatch => dispatch(
    addElement(
      listRef.push().key
    )
  );

const Component = ({
  list,

  getListFromDb,
  listenToElementAdded,
  addElementToDb
}) => {
  useEffect(() => getListFromDb(), []);
  useEffect(() => listenToElementsAdded());

  return (
    <div>
      { Object.keys(list).map(id => <p>{id}</p>) }
      <p onClick={addElementToDb}>Add</p>
    </div>
  );
};

const mapStateToProps = list => ({ list });

const mapStateToProps = {
  getListFromDb,
  listenToElementAdded,
  addElementToDb
};

export default connect(mapStateToProps, mapStateToProps)(Component);

上面的简化示例显示了我的意思。问题是：firebase侦听器是否足够快以用redux替换数据预调度？

如果我们要构建应用程序，并希望实时刷新来自外部的数据，则侦听器可以提供帮助。但是，如果我们预先调度获得的数据，则调度了两次。另外，如果我们仅使用侦听器并从那里进行调度，则可以使代码及其工作更加整洁。但是，如果数据库中有大量数据怎么办？听众会快吗？仅通过侦听器来处理调度是否有效，还是值得在现场进行预调度？

Answer 1

我建议您让Firebase事件侦听器调用redux-thunk操作，然后操作并将数据分发到您的应用程序。如果做得好，那没有错。

但是，请考虑一些更好但不同的方法。

有react-redux-firebase，可以与应用程序商店紧密耦合。但是，如果这太多的集成（您实际上是在将应用程序与Firebase融合在一起），那么请选择前者。

无论如何，我建议您搜索更多有关将redbase应用程序与Firebase一起使用的内容。

仅从Firebase侦听器分发数据是否有效？

1 个答案: