Question

我有两个这样的存储库：

main-app：一个create-react-app项目，其中定义了带有一些reducer的redux存储。

const reducers = combineReducers({
    reducer1: myReducer
});
const store = createStore(reducers);
const app = (
    <Provider store={store}>
        <App />
    </Provider>
);
ReactDOM.render(app, document.getElementById('root'));

在我的App库中，还有一个<AppHeader />组件以下面定义的render方法返回lib-header。

lib-header：使用主应用商店的外部库，定义如下：

class AppHeader extends Component {
  render() {    
    return (
        <div>{this.props.isAuthenticated ? 'User authenticated' : 'User not authenticated'}</div>
    );
  }
}

AppHeader.propTypes = {
    isAuthenticated: PropTypes.bool,
    onSignin: PropTypes.func
};

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    }
};

const mapDispatchToProps = dispatch => {
    return {
        onSignin: () => dispatch(actions.signIn())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(AppHeader);

但是，当lib-header尝试使用connect(...)函数时，它将产生此错误：

在“ Connect（e）”的上下文中找不到“ store”。将根组件包装在中，或者在连接选项中将自定义的React上下文提供程序传递给Connect（e）并将相应的React上下文使用者传递给Connect（e）。

由于某些原因，即使在Provider组件的内部定义了AppHeader组件，在主应用程序的Provider中定义的存储也无法访问外部库。我的主要应用。

任何帮助将不胜感激。

谢谢！

如何从React库内部重用Redux存储

0 个答案: