Redux + React + FireBase:更新时如何使用状态 [英] Redux + React + FireBase: how to use a state when updating

问题描述

我从Firebase&&开始Redux和我在公式生成器中的 firebase.database().ref()功能上的回调 on 功能上遇到一些问题

I'm starting with Firebase && Redux and I'm having some issues with the callback on-function of firebase.database().ref() within the formular

function getAll() {

    const uid = JSON.parse(localStorage.getItem('user'))
        .uid;


    const dbRef = firebase.database()
        .ref().child('events');

    const userRef = dbRef.child(uid);

    let answer = [];

    userRef.on('value', snap => {
        let rx = snap.val();
        for (let item in snap.val()) {
            answer.push(rx[ item ]);
        }
    });

    return Promise.resolve({
        events: answer
    });
}

我在做什么?

我已经在调用此服务的一些操作(触发)之前创建了该方法，并且必须先触发此方法，然后将结果用reducer保存在 store 中.

这是预期的.但是，...

This is what is expected. But,...

• 该方法会及时触发，很好的新方法:-) 但是，
• 回调(按原样)在 redux 1 或 1.5s )触发几秒钟>本身，非常快的单元，同时触发并进行反应渲染.简而言之，在Firebase回调函数返回值之前，已对组件进行了大量渲染.

• The method fires in time, good new :-) but,
• The callback (as it is) fires some seconds after (1 or 1.5s) while the redux itself, very fast unit, fires and make the react render at the same time. In short, the components are rendered lots before the firebase callback gives back a value.

最后，我需要渲染，重新加载页面，更改为应用程序的另一条路线，以便将保存的更改应用于渲染.

At the final then I need to render, reload the page, change to another route of the application so that the saved changes can be applied to render.

因为我是从 redux 和 firebase 开始的，所以我不是 100％(而只有 70％)肯定了这种推论，但是在这种情况下，它们是我能找到的更好的方法.

Since I'm beginning with redux and firebase, I'm not 100% (but only 70%) sure of this deductions, but they are the betters I could've found in this situation.

我现在迫切需要任何帮助，感谢您能为我提供的任何帮助:)

I'm starving for any help now and thank you for any help you could provide me :)

推荐答案

嘿哥们，我今年一月加入Firebase，做了一个整个项目，我知道寻找信息的艰辛.

Hey buddy I started with Firebase this January did a whole project and I know the struggle for finding information.

您的问题的答案是您需要使用sagas.

The answer to your question is you need to use sagas.

https://github.com/redux-saga/redux-saga

Sagas是一种同步API调用的方法，因此在您的reducer调度操作并使其能够控制同步API调用之前调用它们.

Sagas are a way to sync your API calls so they are called before your reducer dispatches an action and makes it possible to control synchronous API calls.

例如

function* addAnswer{
    const user = yield call(Api.addAnswer, action.payload.userId); 
    yield put({type: "REQUEST_USER_ANSWER_SUCCEEDED", user: user});
}

Sagas将等待电话以收益率结束，然后再继续.然后将此功能绑定到动作.

Sagas will wait for the call to end in yield before it continues. Then you bind this function to an action.

function* mySaga() {
    yield takeEvery("REQUEST_USER_ANSWER", fetchUser);
}

然后您将redux-saga中间件添加到商店中

And you add to your store the redux-saga middleware

const sagaMiddleware = createSagaMiddleware()//将其安装在商店中const store = createStore(减速器，applyMiddleware(sagaMiddleware))

基本上，这里发生的是每次您想将其绑定到传奇动作REQUEST_USER_ANSWER时，如果成功，则会触发REQUEST_USER_ANSWER_SUCCEEDED，您也希望将其绑定到减速器.这样，您知道reducer仅在API调用完成并成功后才会触发.

Basically, what happens here is each time you answer you want to be binded to the saga action REQUEST_USER_ANSWER which then if succeeds triggers the REQUEST_USER_ANSWER_SUCCEEDED which you want your reducer to be binded too. This way you know the reducer triggers only if the API call is done and succeed.

人们在他们提供相同工作的项目中使用Saga或Thunk，但是您绝对需要其中之一.

People either use Saga or Thunk in their projects which provide the same work but you absolutly need one of those.

这篇关于Redux + React + FireBase:更新时如何使用状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！