Question

我正在编写一个React Chrome扩展程序，该程序将内容注入到各个页面的多个区域中，并且还具有用于用户登录的弹出窗口

在我的渲染函数中，具有以下内容：

    <Provider store={store}>
        { RowDiv() }
        { isChromeExt() }
    </Provider>

在这些函数中，我像这样渲染React Portal：

function RowDiv() {
    if(window.location.href.split('/')[2] === 'foo') {
        const viewport = document.getElementsByClassName('top-nav-links-container')[0];
        const app = document.createElement('div');
        app.id = 'ml-row';
        viewport.insertAdjacentElement('afterend', app);
        return (<Portal element={ document.getElementById('ml-row')}><Row /></Portal>)
    }
}

function isChromeExt() {
    if(window.location.href.includes("chrome-extension://")) {
        return (
            <Portal element={ document.getElementById('root')}>
                <Dashboard>
                    <Login />
                </Dashboard>
            </Portal>
        )
    }
}

在Chrome弹出窗口中的“登录”组件中，当用户登录时，我调度其令牌和用户数据this.props.dispatch(login(token.access_token, user));

这叫我的动作，叫我的减速器。这些确实会触发：

export function login(jwt, user) {
    chrome.storage.sync.set({jwt, user});
    return {
        type: LOGIN,
        jwt,
        user,
    };
}

---

if (action.type === authTypes.LOGIN) {
    console.log("action Login")
    return {
        token: action.jwt,
        user: action.user,
    };
}

在“行”组件中，我使用connect和mapStateToProps：

function mapStateToProps({ user }) {
        console.log(user);
    return {
        token: user.token,
        user: user.user,
    };
}

export default connect(mapStateToProps)(Row);

我遇到的问题是，当用户登录时，似乎没有触发我的Row组件。

如果我重新加载其中插入Row的页面，则道具就在那里。

有人知道为什么我无法在行组件中触发redux吗？

Redux Store无法在Chrome扩展程序中连接

0 个答案: