Redux + React + FireBase：更新时如何使用状态

Question

大家好：）

我从 Firebase && Redux 开始，但在公式中 on-function 的回调 firebase.database().ref() 遇到了一些问题

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
    });
}

我在做什么？

我在调用此服务之前创建了一些操作（触发器），并且此方法必须在使用缩减器将结果保存到store 之前触发。

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

我的现实是什么？

• 该方法及时触发，好新:-) 但是，
• callback（原样）在（1 或1.5s）几秒钟后触发，而redux 本身，非常快的单元，同时触发并进行反应渲染。简而言之，在 firebase 回调返回值之前，组件会被大量渲染。

最后我需要渲染，重新加载页面，更改到应用程序的另一个路由，以便可以将保存的更改应用于渲染。

由于我是从 redux 和 firebase 开始的，所以我不确定 100%（但只有 70%）确定这些扣除，但它们是在这种情况下我可以找到更好的方法。

那是什么情况？

我现在急需任何帮助，感谢您为我提供的任何帮助:)

Answer 1

嘿，伙计，我今年 1 月开始使用 Firebase，做了一个完整的项目，我知道寻找信息的艰辛。

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

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

Sagas 是一种同步 API 调用的方法，因此它们会在 reducer 调度操作之前被调用，从而可以控制同步 API 调用。

例如，

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

Sagas 将等待调用以 yield 结束，然后再继续。然后将此函数绑定到一个动作。

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

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

const sagaMiddleware = createSagaMiddleware() // mount it on the Store const store = createStore( reducer, applyMiddleware(sagaMiddleware) )

基本上，这里发生的情况是，每次您回答您想要绑定到传奇操作 REQUEST_USER_ANSWER 时，如果成功触发 REQUEST_USER_ANSWER_SUCCEEDED，您也希望您的减速器也被绑定。这样您就知道只有在 API 调用完成并成功时才会触发 reducer。

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