使用连接并存储在同一组件中来响应本机redux

我正在使用React本机应用程序,我使用Redux来管理全局状态。 我想在调用商店的应用程序组件中存储状态:

/* eslint-disable global-require */
import React,{ Component } from 'react'
import { Provider,connect } from 'react-redux'
import { BackHandler } from 'react-native'
// ***************************************************
import AppContainer from './eXpand/Components/Navigation';
// ***************************************************
import { AppLoading } from 'expo'
import * as Font from 'expo-font'
import { Ionicons } from '@expo/vector-icons'
import {
  cacheAssets,cacheFonts
} from './eXpand/Helpers/Defaults/AssetsCaching'
import store from '~/Store/store'
import registerForPushNotificationsAsync from './eXpand/Components/Services/notifications';

// Local Import
import { setUserGsm } from '~/Store/actions';

class App extends Component {
  _isMounted = false;
  constructor(props) {
    super(props)
    this.state = {
      isReady: false,GSM: null
    }
  }

  /**
 * Demande d'autorisation pour accéder au token du GSM et l'envoyer vers l'api
 */
  async registerForPush() {
    const { status: existingStatus } = await Permissions.getasync(
      Permissions.NOTIFICATIONS
    );
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      return;
    }
    let gsm = await Notifications.getExpoPushTokenAsync();

    if (this._isMounted) {
      this.setState({
        GSM: gsm
      });
    }

    console.log("### GSM TOKEN GSM ###")
    console.log(this.state.GSM)
    console.log("#####################")
  }

  /**
   * Add Font with Asynchronous Method
   */

  async componentDidmount() {
    console.log("##########  COMPONENT DID MOUNT   ############")
    this._isMounted = true;
    if (this._isMounted) {
      this.registerForPush()
      this.props.setUserGsm(this.state.GSM)
    }
    BackHandler.addEventListener('hardwareBackPress',this.handleBackButton);
    await Font.loadAsync({
      // ROBOTO
      Roboto: require('native-base/Fonts/Roboto.ttf'),Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),// SFUIDisplay
      SFUIDisplayBlack: require('^/Fonts/SFUIDisplay-Black.otf'),SFUIDisplayBold: require('^/Fonts/SFUIDisplay-Bold.otf'),SFUIDisplayHeavy: require('^/Fonts/SFUIDisplay-Heavy.otf'),SFUIDisplayLight: require('^/Fonts/SFUIDisplay-Light.otf'),SFUIDisplayMedium: require('^/Fonts/SFUIDisplay-Medium.otf'),SFUIDisplaySemibold: require('^/Fonts/SFUIDisplay-Semibold.otf'),SFUIDisplayThin: require('^/Fonts/SFUIDisplay-Thin.otf'),SFUIDisplayUltralight: require('^/Fonts/SFUIDisplay-Ultralight.otf'),// MyriadPro
      MYRIADPROBOLD: require('^/Fonts/MyriadPro-Bold.otf'),MyriadProBlackSemiCn: require('^/Fonts/MyriadPro-BlackSemiCn.otf'),MyriadProBoldSemiExtended: require('^/Fonts/MyriadPro-BoldSemiExtended.ttf'),...Ionicons.font,// PTSans
      PTSansRegular: require('^/Fonts/PTSans-Regular.ttf'),PTSansBold: require('^/Fonts/PTSans-Bold.ttf'),PTSansItalic: require('^/Fonts/PTSans-Italic.ttf'),})
    this.setState({ isReady: true })
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress',this.handleBackButton);
    console.log("##########  COMPONENT WILL MOUNT   ############")
    this._isMounted = false;
  }

  handleBackButton() {
    return true;
  }

  async _loadAssetsAsync() {
    const imageAssets = cacheAssets([require('^/Logos/expanded.png')])

    const fontAssets = cacheFonts({
      // ROBOTO
      Roboto: require('native-base/Fonts/Roboto.ttf'),})

    await Promise.all([imageAssets,fontAssets])
  }

  render() {
    const Root = () => {
      if (!this.state.isReady) {
        return (
          <AppLoading
            startAsync={this._loadAssetsAsync}
            onFinish={() => this.setState({ isReady: true })}
          />
        )
      }
      return <AppContainer />
    }

    return (
      <Provider store={store}>
        <Root />
      </Provider>
    )
  }
}
const mapstatetoProps = (state) => ({
  GSM: state.GSM
});

const mapDispatchToProps = (dispatch) => ({
  setUserGsm: (GSM) => {
    dispatch(setUserGsm(GSM));
  }
});

export default connect(
  mapstatetoProps,mapDispatchToProps,)(App);

我收到此错误:

不变违规:在“ Connect(App)”的上下文中找不到“ store”。要么将根组件包装在中,要么在连接选项中将自定义React上下文提供程序传递给Connect(App),并将相应的React上下文使用者传递给Connect(App)。

why111333 回答:使用连接并存储在同一组件中来响应本机redux

您不能用这种方式。

react-redux Provider正在将存储传递给react-redux connect。而且您正在connect中未包装的组件中使用Provider(在React组件树中的某个地方)(组件本身正在渲染Provider,为时已晚)。

本文链接:https://www.f2er.com/3008516.html

大家都在问