在使用 google 标签管理器之前，如何等待 Redux Saga 中的状态发生变化？

Question

我正在尝试将 google 标签管理器添加到我们使用 Redux Saga 的项目中。我对 redux saga 或 gtm 都不是很熟悉。我想要做的是创建一个如下所示的 gtm：

TagManager.dataLayer({
            dataLayer: {
                event: 'login',
                userId: user.UserID,
                locale
            }
        })

我希望事件在用户登录时触发。我遇到的问题是我无法获取用户 ID，因为事件是在我拥有用户 ID 之前触发的，因此在中显示为 undefined通用汽车。传奇看起来像这样：

// Login user
export function* loginSaga(action) {
    yield put(actions.loginStart());

const payload = {
    username: action.username,
    password: action.password
};
try {
const response = yield axios.post('/api/auth/login', payload);
const locale = yield select(state => state.common.locale);
const user = yield select(state => state.user.user);

if (response.data.success) {
    const token = yield response.data.data.Token;
    yield cookies.set('uid', token, { path: '/' });

    yield put(actions.getUser(token));
    yield put(actions.loginSuccess(token));
    yield put(actions.closeModal());
    
        TagManager.dataLayer({
            dataLayer: {
                event: 'login',
                userId: user.UserID,
                locale
            }
        });
}

是否可以等到 userid 不再未定义，然后触发 gtm，这样做的最佳做法是什么？

如果您有任何问题，请告诉我，我想您也有。正如我之前提到的，我对此很陌生。

谢谢！

Answer 1

使用下面的代码行，在您创建 axios.post 之后，您不会存储用户详细信息状态，但很快在下一行中您将尝试获取 user/locale 详细信息。编辑 - user 也需要从另一个 ation 更新的商店中获取。因此它们是未定义的。

解法：

使用 take 等待操作完成。

像这样

try {
    const response = yield axios.post("/api/auth/login", payload);
    // wait until one of the success or failure action is dispatched
    yield take([ACTION_TYPES.GET_USER_DETAILS]);//provide your action type here
    const locale = yield select((state) => state.common.locale);
    const user = yield select((state) => state.user.user);
  ...

在使用 google 标签管理器之前，如何等待 Redux Saga 中的状态发生变化？

How can I wait for state to change in Redux Saga before using google tag manager?

google-tag-manager

reactjs

redux

redux-saga

react-redux