如何处理反应本质中的firebase身份验证状态

Question

对不起，我找不到任何解决方案。也许这是一个错误的方法。

app.js

import React, { Component } from 'react';
import { View } from 'react-native';
import Home from './app/screens/Home';
import Loading from './app/screens/Loading';
import Login from './app/screens/Login';
import Register from './app/screens/Register';
import styles from './app/assets/styles/login';
export default class App extends Component<{}> {
  states = {
    email: '',
    password: '',
    authenticating: false,
    user: null,
    error: '',
  }
  constructor(props) {
    super(props);
  }
  renderCurrentState() {
    if (this.state.authenticating) {
      return (
        <Loading />
      )
    }
    if (this.state.user !== null) {
      return (
        <Home />
      )
    }
    return (
      <Login />
    )
  }
  render() {
    return (
      <View style={styles.container}>
        {this.renderCurrentState()}
      </View>
    );
  }
}

参考。JS

import * as firebase from 'firebase';
const config = {
    apiKey: "XXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXX",
    storageBucket: "XXXXX",
    messagingSenderId: "XXXXX"
};
export const firebaseApp = firebase.initializeApp(config);
const rootRef = firebase.database().ref();
export const tasksRef = rootRef.child('tasks');
export const timeRef = firebase.database.ServerValue.TIMESTAMP;

login.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { firebaseApp } from '../config/reference';
import { Button } from '../components/Button';
import { Input } from '../components/Input';
import styles from '../assets/styles/login';
export default class Login extends Component {
  states = {
    email: '',
    password: '',
    authenticating: false,
    user: null,
    error: '',
  }
  constructor(props) {
    super(props);
  }
  onPressSignIn() {
    RTCStatsIceCandidatePairState.setState({
      authenticating: true,
    });
    const { email, password } = state.state;
    firebaseApp.auth().signInWithEmailAndPassword(email, password)
      .then(user => this.setState({
        authenticating: false,
        user,
        error: '',
      }))
      .catch(() => {
        // Login was not successful
        firebaseApp.auth().createUserWithEmailAndPassword(email, password)
          .then(user => this.setState({
            authenticating: false,
            user,
            error: '',
          }))
          .catch(() => this.setState({
            authenticating: false,
            user: null,
            error: 'Authentication Failure',
          }))
      })
  }
  render() {
    return (
      <View style={styles.form}>
        <Input
          placeholder='Enter your email...'
          label='Email'
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />
        <Input
          placeholder='Enter your password...'
          label='Password'
          secureTextEntry
          onChangeText={password => this.setState({ password })}
          value={this.state.password}
        />
        <Button onPress={() => this.onPressSignIn()}>Log In</Button>
        <Text>{this.state.error}</Text>
      </View>
    )
  }
}

home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { firebaseApp } from '../config/reference';
import { Button } from '../components/Button';
import styles from '../assets/styles/login';
export default class Home extends Component {
  states = {
    email: '',
    password: '',
    authenticating: false,
    user: null,
    error: '',
  }
  constructor(props) {
    super(props);
  }
  onPressLogOut() {
    firebaseApp.auth().signOut()
      .then(() => {
        this.setState({
          email: '',
          password: '',
          authenticating: false,
          user: null,
    })
      }, error => {
        console.error('Sign Out Error', error);
      });
  }
    render() {
      return (
        <View style={styles.form}>
          <Text>Logged In</Text>
          <Button onPress={() => this.onPressLogOut()}>Log Out</Button>
        </View>
      )
    }
}

我必须分享以下状态：

states = {
  email: '',
  password: '',
  authenticating: false,
  user: null,
  error: '',
}

什么是分享该州的好解决方案？抱歉，我是新手反应和反应本地的。如果各州被其他组件改变了，我该如何聆听？

如果我只使用一个组件，则可以正常工作。希望您了解我的问题

Answer 1

在反应中，状态仅与组件有关。如果您需要在应用中共享数据，则应实现Redux并将数据存储在商店中。您在Internet上有很多Ressources，用于实施REDUX，并具有反应。

您还应该阅读有关助焊剂体系结构的更多信息。