从App.js访问redux存储中的状态

Question

在我的ReactNative应用程序中，我使用Redux进行状态管理，并在App.js中声明Provider——请参阅下文。请注意，我已将App.js从函数组件更改为类组件。

我的问题是如何访问App.js中Redux存储中的数据？当我尝试下面的代码时，我得到一个错误，上面写着：

在"Connect(App("的上下文中找不到"store">

这是App.js代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { store } from '../store';
// Components
import ComponentA from '../ComponentA';
import ComponentB from '../ComponentB';
class App extends Component {
render() {
return(
<Provider store={store}>
{
this.props.isAuthenticated ? <ComponentA /> : <ComponentB />
}
</Provider>
);
}
}
function mapStateToProps(state) {
return { 
isAuthenticated: state.app.isAuthenticated
};
}
export default connect(mapStateToProps)(App);

这是反模式吗？感觉确实如此。在我嵌入App.js的下一个组件中处理我的isAuthenticated检查更好吗？

Answer 1

不建议在其他数据访问组件中编写提供程序，以这种方式编写代码是一种糟糕的做法。

请定义一个身份验证组件，并将其呈现在该应用程序组件中。

Answer 2

您可以通过从存储中调用getState方法来获取状态：

store.getState();

Answer 3

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { rootReducer } from '../store';
// Components
import ComponentA from '../ComponentA';
import ComponentB from '../ComponentB';
const store = createStore(rootReducer)
class App extends Component {
render() {
return(
<Provider store={store}>
{
this.props.isAuthenticated ? <ComponentA /> : <ComponentB />
}
</Provider>
);
}
}
function mapStateToProps(state) {
return { 
isAuthenticated: state.app.isAuthenticatenter code hereed
};
}
export default connect(mapStateToProps)(App);