如何将来自 Firebase 的数据写入快速存储? [英] How can i write data that is coming from Firebase to store quickly?
问题描述
首先,我正在使用 React Native.我正在从 Firebase 获取数据并希望快速写入存储(通过 Redux).但它不起作用.你可以在下面找到我的所有代码:
Firstly, I'm working with React Native. I'm getting a data from Firebase and want to write to store (by Redux) quickly. But It doesn't work. You can find my all of codes below:
功能:
async getTumData (uid) {
const {selectedGroupDetail, getSelectedGroupDetail} = this.props;
var yeniGrupDetayi = {};
await firebase.database().ref("/groups/"+uid).once('value').then(
function(snapshot){
yeniGrupDetayi = {...snapshot.val(), uid: uid};
}).catch(e => console.log(e.message));
console.log("FONKSIYON ICERISINDEKI ITEM ==>", yeniGrupDetayi);
this.props.getSelectedGroupDetail(yeniGrupDetayi);
console.log("ACTION'DAN GELEN ITEM ===>", selectedGroupDetail);
}
行动:
export const getSelectedGroupDetail = (yeniGrupDetayi) => {
return {
type: GET_SELECTED_GROUP_DETAIL,
payload: yeniGrupDetayi
}
};
减速器:
case GET_SELECTED_GROUP_DETAIL:
return { ...state, selectedGroupDetail: action.payload}
Çıktı:
FONKSIYON ICERISINDEKI ITEM ==> {admin: {…}, groupDescription: "Yaygın inancın tersine, Lorem Ipsum rastgele sözcü…erini incelediğinde kesin bir kaynağa ulaşmıştır.", groupName: "İnsan Kaynakları", groupProfilePic: "", members: {…}, …}
ACTION'DAN GELEN ITEM ===> {}
我的页面中有一个 FlatList,我在 FlatList 的 renderItem 中定义了一个按钮.当我点击这个按钮时,getTumData()
函数正在工作.
There is a FlatList in my page and I defined a button in renderItem of FlatList. When i click to this button, getTumData()
function is working.
当我第一次点击这个按钮时,selectedGroupDetail
是 null
.第二次,它显示以前的数据.
When i click to this button first time, selectedGroupDetail
is null
. Second time, it shows previous data.
如何快速快速地将数据写入Store?
How can i write a data to Store quickly and fast?
谢谢,
推荐答案
事情是:- 您在代码中同时使用 async/await 和 then/catch.- 在异步代码解析之前调用 getSelectedGroupDetail.
The thing is: - You're using both async/await, and then/catch in your code. - you're calling getSelectedGroupDetail before your async code resolves.
快速解决方案
getTumData = (uid) => {
const {selectedGroupDetail, getSelectedGroupDetail} = this.props;
var yeniGrupDetayi = {};
firebase.database().ref("/groups/"+uid).once('value').then(
(snapshot) => {
yeniGrupDetayi = {...snapshot.val(), uid: uid};
this.props.getSelectedGroupDetail(yeniGrupDetayi);
}).catch(e => console.log(e.message));
};
更好的解决方案:
第一个:使用 Redux-Thunk 中间件.第二:将你的异步代码移到你的动作创建器中:我是说这个
1st: use Redux-Thunk middleware. 2nd: Move your Async code into your action creator: I mean this
async getTumData (uid) {
const {selectedGroupDetail, getSelectedGroupDetail} = this.props;
var yeniGrupDetayi = {};
await firebase.database().ref("/groups/"+uid).once('value').then(
function(snapshot){
yeniGrupDetayi = {...snapshot.val(), uid: uid};
}).catch(e => console.log(e.message));
console.log("FONKSIYON ICERISINDEKI ITEM ==>", yeniGrupDetayi);
this.props.getSelectedGroupDetail(yeniGrupDetayi);
console.log("ACTION'DAN GELEN ITEM ===>", selectedGroupDetail);
}
第三:在您的 selectedGroupDetail 解析之前,您的减速器应该有另一条数据作为时间间隔的指示器:
3rd: Your reducer should have another piece of data as an indicator for the time-gap before your selectedGroupDetail resolves:
// reducer initial state:
const INITIAL_STATE = { error: '', loading: false, selectedGroupDetail: null }
4th:在你的动作创建者中,你应该分派 3 个动作:ACTION_NAME_START//这应该只在您的减速器中将加载设置为 true.ACTION_NAME_SUCCESS//将加载设置为 false,并将 selectedGroupDetail 设置为返回的新集合ACTION_NAME_FAIL//如果操作失败设置错误
4th: Inside your action creator, you should dispatch 3 actions: ACTION_NAME_START // This should should only set loading to true in your reducer. ACTION_NAME_SUCCESS // set loading to false, and selectedGroupDetail to the new collection retured ACTION_NAME_FAIL // in case op failed set error
5th:你的 React 组件,应该显示一个加载指示器(微调器或其他东西),并且可能在加载状态期间禁用 FlatList 按钮.
5th: Your React component, should display a loading indicator (spinner or somthing), and maybe disable FlatList button during the loading state.
// Action creator
export const myAction = () => (dispatch) => {
dispatch({ type: ACTION_NAME_START });
firebase.database().ref("/groups/"+uid).once('value').then(
function(snapshot){
yeniGrupDetayi = {...snapshot.val(), uid: uid};
dispatch({ type: ACTION_NAME_SUCCESS, payload: yeniGrupDetayi });
}).catch(e => {
dispatch({ type: ACTION_NAME_FAIL, payload: e.message });
});
};
// Reducer
const INITIAL_STATE = {
loading: false,
error: '',
data: null,
};
export default (state = INITIAL_STATE, { type, payload }) => {
switch (type) {
case ACTION_NAME_START:
return {
...state,
error: '',
loading: true,
data: null,
};
case ACTION_NAME_SUCCESS:
return {
...state,
error: '',
loading: false,
data: payload,
};
case ACTION_NAME_FAIL:
return {
...state,
error: payload,
loading: false,
data: null,
};
default:
return state;
}
};
这篇关于如何将来自 Firebase 的数据写入快速存储?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!