javascript - 从 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，所以这是否意味着它不是异步的？

有什么想法吗？

或者，有更好的方法吗？我总是可以设置初始状态，然后立即更改它，并使用条件渲染让渲染等待更改完成，但这肯定看起来更糟。

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)
});