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 代替数据预分派(dispatch)?
如果我们想要构建一个应用程序,我们想要实时刷新来自外部的数据,监听器可以提供帮助。但是如果我们预先发送我们得到的数据,我们就会发送两次。此外,如果我们只使用监听器并从那里进行调度,它可以使代码及其工作更加清晰。但是,如果数据库中有大量数据怎么办?听众会很快吗?仅通过监听器处理调度是否有效,还是值得就地预调度?
最佳答案
我建议让您的 firebase 事件监听器调用 redux-thunk然后操作数据并将其分派(dispatch)给您的应用程序的操作。如果处理得当,那没有错。
然而,考虑一些不是更好但不同的方法。
有 react-redux-firebase这允许与您的应用程序商店紧密耦合。但是,如果集成过多(实际上是将您的应用程序与 firebase 融合在一起),则选择前者。
无论如何,我建议您搜索更多有关在 redux 应用中使用 firebase 的内容。
关于javascript - 仅从 firebase 监听器发送数据是否有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55299649/