Как заставить React ждать действия Redux перед рендерингом?

Question

Я пытаюсь создать собственное приложение для блога, но оно не работает должным образом. Вот мои коды для моих «startSetMyBlogs»:

export const startSetMyBlogs = () => {
    return (dispatch, getState) => {
        const myBlogs = [];
        const blogRef = database.ref('blogs/')
        const uid = getState().auth.uid;

       //join table to get blogs match with logging in user

        return database.ref(`author-blog`)
            .once('value', snap => snap.val())
            .then(childSnapshot => {
                childSnapshot.forEach((blog) => {
                    if (blog.val() == uid) {
                        blogRef.child(blog.key).once('value').then(blogSnapshot => {
                            myBlogs.push({
                                id: blogSnapshot.key,
                                ...blogSnapshot.val()
                            })
                        })
                    }
                })
       // Dispatch another action to set redux state.
              dispatch(setUserBlogs(myBlogs));
         })
    }
}

мое действие «setUserBlogs»:

export const setUserBlogs = (myBlogs) => ({
    type: 'SET_USER_BLOGS',
    myBlogs
})

Так как мне дождаться, пока действие «setUserBlogs» завершится sh до того, как передать реквизиты для моего компонента BlogList?

Answer 1

Все, что вам нужно сделать, это сохранить и передать состояние загрузки, пока ваши данные не будут готовы

export const startSetMyBlogs = () => {
    return (dispatch, getState) => {
        const myBlogs = [];
        const blogRef = database.ref('blogs/')
        const uid = getState().auth.uid;

       //join table to get blogs match with logging in user
        dispatch({type: 'SET_LOADING', payload: true});
        return database.ref(`author-blog`)
            .once('value', snap => snap.val())
            .then(childSnapshot => {
                childSnapshot.forEach((blog) => {
                    if (blog.val() == uid) {
                        blogRef.child(blog.key).once('value').then(blogSnapshot => {
                            myBlogs.push({
                                id: blogSnapshot.key,
                                ...blogSnapshot.val()
                            })
                        })
                    }
                })
              // Dispatch another action to set redux state.
              dispatch(setUserBlogs(myBlogs));
              dispatch({type: 'SET_LOADING', payload: false});
         })
    }
}

Как только вы это сделаете, вы можете использовать это состояние загрузки в компоненте для рендеринга загрузчика

const mapStateToProps = state => {
   blogs: state.blogs,
   isLoading: state.isLoading
}

Answer 2

Используйте его, как показано ниже: Отправьте действие, как только вы получите желаемое от Firebase.

        return database.ref(`author-blog`)
            .once('value', snap => snap.val())
            .then(childSnapshot => {
                childSnapshot.forEach((blog) => {
                    if (blog.val() == uid) {
                        blogRef.child(blog.key).once('value').then(blogSnapshot => {
                            myBlogs.push({
                                id: blogSnapshot.key,
                                ...blogSnapshot.val()
                            })
                        })
                    }
                })
              dispatch(setUserBlogs(myBlogs));
         })

ПРИМЕЧАНИЕ. Вызов API - asyn c, поэтому вам нужно подождать, пока данные назначат это констатировать.

Надеюсь, это поможет.