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 不返回返回承诺的函数。

然后，在这种情况下，发生的情况是{<1>}在执行下一个操作之前没有等待它们完成。

我不完全知道那个database.ref变量是什么，但这应该可以工作：

database

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

1 个答案: