javascript - Redux + react + FireBase : how to use a state when updating

Question

大家好:)

我从 Firebase && Redux 开始，我遇到了一些关于 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 中之前触发。

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

我的实际情况是什么？

• 该方法及时触发，好新:-) 但是，
• 回调(原样)在(1 或 1.5s)几秒后触发，而 redux 本身，非常快的单位，同时开火并使用react渲染。简而言之，在 firebase 回调返回一个值之前，组件会被渲染很多次。

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

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

那情况呢？

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

Answer 1

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

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

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

Sagas 是一种同步您的 API 调用的方法，因此它们会在您的 reducer 分派(dispatch)操作之前被调用，并使得控制同步 API 调用成为可能。

例如，

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

Sagas 在继续之前会等待调用以 yield 结束。然后将此函数绑定(bind)到一个操作。

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

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

const sagaMiddleware = createSagaMiddleware() //挂载到 Store const store = createStore( reducer ， 应用中间件(传奇中间件) )

基本上，这里发生的是每次你回答你想要绑定(bind)到 saga 操作 REQUEST_USER_ANSWER ，然后如果成功触发 REQUEST_USER_ANSWER_SUCCEEDED 你希望你的 reducer 也被绑定(bind)。这样您就知道只有在 API 调用完成并成功时才会触发 reducer。

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