Question

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

我的问题是如何访问Redux中App.js存储区中的数据？当我尝试以下代码时，出现以下错误：

在“ Connect（App）”的上下文中找不到“商店”

这是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);

这是反模式吗？确实感觉像。更好地处理isAuthenticated中嵌入的下一个组件中的App.js吗？

Answer 1

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

 store.getState();

Answer 2

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);

Answer 3

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

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

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

3 个答案: