时间戳

首页 > 解决方案 > React Redux thunk - 调度完成后渲染应用程序

reactjs - React Redux thunk - 调度完成后渲染应用程序

问题描述

我的应用程序使用 React、Redux 和 Thunk。 在我的应用程序呈现之前，我希望将一些数据发送到商店。

如何确保在所有调度完成后ReactDOM.render()运行？请参阅下面的代码

index.js

const setInitialStore = () => {
  return dispatch => Promise.all([
    dispatch(startSubscribeUser()),
    dispatch(startSubscribeNotes()),
  ]).then(() => {
    console.log('initialLoad DONE')
    return Promise.resolve(true)
  })
}

store.dispatch(setInitialStore()).then(()=>{
  console.log('Render App')
  ReactDOM.render(jsx, document.getElementById('app'))
})

行动

export const setUser = (user) => ({
  type: SET_USER,
  user
})
export const startSubscribeUser = () => {
  return (dispatch, getState) => {
    const uid = getState().auth.id

    database.ref(`users/${uid}`)
    .on('value', (snapshot) => {
      const data = snapshot.val()
      const user = {
        ...data
      }
      console.log('user.on()')
      dispatch(setUser(user))
    })
  }
}

export const setNote = (note) => ({
  type: SET_NOTE,
  note
})
export const startSubscribeNotes = () => {
  return (dispatch, getState) => {

    database.ref('notes')
    .on('value', (snapshot) => {
      const data = snapshot.val()
      const note = {
        ...data
      }
      console.log('note.on()')
      dispatch(setNote(note))
    })
  }
}

我的日志显示

"initialLoad DONE"
"Render App"
...
"user.on()"
"note.on()"

我期望的是user.on()和note.on()之前被记录的initialLoad DONE和Render App

非常感谢！/K

标签： reactjsfirebase-realtime-databasereduxredux-thunk

解决方案

我很确定这是因为startSubscribeUser并且startSubscribeNotes 不返回返回 promise 的函数。

然后，在这种情况下发生的情况是，在执行下一个 then 之前database.ref没有等待完成。

我不确切知道该database变量是什么，但这应该有效：

  return new Promise(resolve => {
    database.ref(`users/${uid}`)
    .on('value', (snapshot) => {
      const data = snapshot.val()
      const user = {
        ...data
      }
      console.log('user.on()')
      dispatch(setUser(user))
      resolve()
    })
  })

推荐阅读