Redux + React + FireBase: как использовать состояние при обновлении

Question

Привет, парни и девушки :) 1001 * Я начинаю с Firebase && Redux и у меня возникают некоторые проблемы с функцией обратного вызова on 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

Привет, приятель. Я начал с Firebase в январе этого года, выполнил целый проект, и я знаю борьбу за поиск информации.

Ответ на ваш вопрос: вам нужно использовать саги.

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

Sagas - это способ синхронизировать ваши вызовы API, поэтому они вызываются до того, как ваш редуктор отправляет действие и позволяет контролировать синхронные вызовы API.

Например,

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

Sagas будет ждать завершения вызова до того, как он продолжится. Затем вы связываете эту функцию с действием.

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 выполнен и успешно выполнен.

Люди используют Saga или Thunk в своих проектах, которые выполняют ту же работу, но вам абсолютно необходим один из них.