使用axios调用设置React redux的初始状态

Question

我有一个使用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()的异步性导致的问题，console.log(userData)在getUserData()完成之前运行。然而，我尝试过：

getUserData().then(function(userData) {
     console.log(userData);
});

我收到了“TypeError：未定义属性'then'”的错误。我的函数显然没有返回Promise，那么这不意味着它不是异步的吗？

有什么想法？

或者，有更好的方法吗？我可以设置初始状态，然后立即更改它，并使渲染等待更改完成并进行条件渲染，但这绝对似乎更糟。

- Toby Weed

---

可能是一个重复的问题，参见如何从异步调用中返回响应?。 - user3210641

你有更新 userData 的任何操作吗？如果有的话，我认为你应该将用户初始化为空状态（null），一旦获得数据后，再分派一个操作来更新 userData。 - Alan

@user3210641 不，因为（请参见编辑）我的函数不返回 Promise。据我所知，我正在使用正确的形式来返回异步 axios 调用的响应。 - Toby Weed

@TobyWeed 不，这不是从异步调用中返回值的方法。 - user3210641

最终做到了那个。 - Toby Weed

Answer 1

您需要从您的getUserData函数返回一个Promise，并使用.then()访问它。

function getUserData() {
  return new Promise((resolve, reject) => {
    if (Auth.loggedIn()) {
      axios.get('/route')
        .then(res => resolve(res.data))
        .catch(err => reject(err));
    } else {
      resolve(' ');
    }
  });
};

getUserData().then(function(userData) {
  const initialState = {
    userData: userData, // ' ' or axios result
  };
  console.log(initialState.userData)
}); 

- user3210641