从axios调用中React redux设置初始状态(React redux setting initial state from axios call)

 我有一个使用Redux和axios的React应用程序。 在我从服务器获取一些信息之前，我不想要任何渲染，我通过axios检索。 
 
 我认为最好的方法是通过基于axios调用初始化redux状态。 
 
 但是，我的函数似乎没有及时返回任何状态初始化... 
 
function getUserData() {
    if (Auth.loggedIn()) { //leaving this here bc it could be important; Auth is another class and loggedIn returns a boolean
        axios.get('/route').then(res => {
            console.log(res.data); //This prints the right thing (an object)
            return res.data;
        });
    } else {
        return ' '; //This works fine; state gets initialized to ' '
    }
}

    let userData = getUserData();
    console.log(userData); //When getUserData() returns ' ', this prints ' '. However, when getUserData() returns my object, this prints undefined.

    const initialState = {
        userData: userData
    };
 
 我意识到这可能是一个问题，getUserData（）是异步的，并且在getUserData（）之前运行的console.log（userData）已经完成。 但是，我尝试过： 
 
getUserData().then(function(userData) {
     console.log(userData);
});
 
 并收到'TypeError：无法读取属性'然后'未定义'。 我的函数显然没有返回一个promise，所以这是不是意味着它不是异步的？ 
 
 有任何想法吗？ 
 
 或者，有更好的方法吗？ 我总是可以设置初始状态，然后立即更改它，并使渲染等待条件渲染完成更改，但这看起来肯定更糟。 

I have a React app which uses Redux and axios. I do not want anything to render before I have some information from the server, which I am retrieving via axios.
 
I thought that the best way to do this would be by initializing redux state based on that axios call.
 
However, my function does not seem to be returning anything in time for state initialization...
 
function getUserData() {
    if (Auth.loggedIn()) { //leaving this here bc it could be important; Auth is another class and loggedIn returns a boolean
        axios.get('/route').then(res => {
            console.log(res.data); //This prints the right thing (an object)
            return res.data;
        });
    } else {
        return ' '; //This works fine; state gets initialized to ' '
    }
}

    let userData = getUserData();
    console.log(userData); //When getUserData() returns ' ', this prints ' '. However, when getUserData() returns my object, this prints undefined.

    const initialState = {
        userData: userData
    };
 
I realize that this could be a problem with getUserData() being asynchronous, and console.log(userData) running before getUserData() has finished. However, I tried:
 
getUserData().then(function(userData) {
     console.log(userData);
});
 
And received 'TypeError: Cannot read property 'then' of undefined'. My function is obviously not returning a promise, so doesn't that mean it's not asynchronous?
 
Any ideas?
 
Alternatively, is there a better way of doing this? I could always set initial state and then immediately change it, and make rendering wait for the change to be complete with a conditional render, but that definitely seems worse.

原文：https://stackoverflow.com/questions/50892683