REACT/REDUX：如何将 Store 连接到 App 组件？答案

【问题标题】：REACT/REDUX: How to connect Store to the App component?REACT/REDUX：如何将 Store 连接到 App 组件？
【发布时间】：2019-12-26 22:03:21
【问题描述】：

如果可能的话，我想在不创建其他文件的情况下让我的主要组件状态感知...这是我的代码：

import React from 'react';
import { Provider } from 'react-redux';
import { connect } from 'react-redux';
import store from './store';

const App = ({ isAuthenticated }) => {
    return (
        <Provider store={store}>
            {isAuthenticated ? (
                <>
                    <p>...AUTHED...</p>
                </>
            ) : (
                <>
                    <p>...NOT AUTHED...</p>
                </>
            )}
        </Provider>
    );
};

const mapStateToProps = state => ({
    isAuthenticated: state.mode.isAuthenticated
});

export default connect(mapStateToProps)(App);

我收到错误：“在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供程序传递给相应的在连接选项中将上下文消费者反应给 Connect(App)。”

我尝试更改我的代码，但没有成功

import React from 'react';
import { Provider } from 'react-redux';
import { connect } from 'react-redux';
import store from './store';

const AppWithStore = () => {
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
};

const App = ({ isAuthenticated }) => {
    return (
        <>
            {isAuthenticated ? (
                <>
                    <p>...AUTHED...</p>
                </>
            ) : (
                <>
                    <p>...NOT AUTHED...</p>
                </>
            )}
        </>
    );
};

const mapStateToProps = state => ({
    isAuthenticated: state.mode.isAuthenticated
});

export default connect(mapStateToProps)(AppWithStore);

我错过了什么吗？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

Provider“使 redux 存储可用于任何嵌套组件。” - https://react-redux.js.org/api/provider#overview

您不想将您的组件与Provider（AppWithStore）“连接”，您想“连接”Provider（应用程序）的任何子组件

基于您的第二个示例：

你需要connect你的App组件，而不是AppWithStore

connect(mapStateToProps)(App);

然后确保您默认导出AppWithStore

import React from 'react';
import { Provider } from 'react-redux';
import { connect } from 'react-redux';
import store from './store';

let App = ({ isAuthenticated }) => {
    return (
        <>
            {isAuthenticated ? (
                <>
                    <p>...AUTHED...</p>
                </>
            ) : (
                <>
                    <p>...NOT AUTHED...</p>
                </>
            )}
        </>
    );
};

const mapStateToProps = state => ({
    isAuthenticated: state.mode.isAuthenticated
});

App = connect(mapStateToProps)(App);

const AppWithStore = () => {
    return (
        <Provider store={store}>
            <App />
        </Provider>
    );
};


export default AppWithStore;

【讨论】：