React Redux thunk - 在分派完成后呈现应用程序

Question

我的应用程序使用 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

Answer 1

我很确定这是因为 startSubscribeUser 和 startSubscribeNotes 没有 return 函数 return 承诺 .

然后，在这种情况下，database.ref 没有等待 完成，然后再执行下一个 then 中的内容。

我不确切知道 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()
    })
  })