reactjs - Saga 中的 yield axios.get() 调用将路径名更改为默认位置“/”

Question

我有这个 Saga 用于从 localStorage 检索令牌并自动登录用户

export function* authCheckState(action) {
    const token = localStorage.getItem("jwt");
    const expDate = localStorage.getItem("expDate");
    if (!token) {
        yield put(actions.logout()); 
    } else {
        const expirationDate = new Date(expDate);
        if (expirationDate <= new Date()) {
            yield put(actions.logout());
        } else {
            axios.defaults.headers.common['Authorization'] = token;
            const username = localStorage.getItem('username');
            // const loggedInUser = yield axios.get(`/users/${username}`);
            // console.log('HERE');
            yield put(actions.loginSuccess());
            yield put(
                actions.fireTimeout(
                    (expirationDate.getTime() - new Date().getTime())
                    // 10 * 1000 // ms
                )
            );
        }

    }
}

因此，如果我访问应用程序中的任何路径，例如“/users”，它在执行 saga 后保持不变。

现在上面的代码运行良好。但是现在我想添加一个 axios 调用来获取一些这样的数据：

const loggedInUser = yield axios.get(`/users/${username}`);
// store it in the store.

当我添加这个 axios 调用时。我被重定向到主页“/”。

之前：工作

之后：发生不工作的重定向

Answer 1

我想发表评论，但由于积分较少而无法发表评论，也许你应该使用

yield call (Api.fetchUser,username)

whereApi.fetchUser是一个在内部命中其余 api 并返回承诺的函数。

Answer 2

有趣的是，我改变了调用的顺序，现在它可以正常工作了！！

yield put(actions.loginSuccess());
const loggedInUser = yield axios.get(`/users/${username}`);
yield put(actions.loginSuccess(username, loggedInUser.data));