Реакционно-нативное состояние прохода в глобальном масштабе с использованием редукса

Question

В моем приложении LoginScreen (fristScreen) может войти в систему с помощью Facebook, и после успешного входа в систему приложение получает Facebook access token и переходит к следующему экрану (VerifyScreen).В VerifyScreen (secondScreen), когда я нажимаю кнопку, я хочу вывести глобальное состояние facebookToken и отобразить на экране.Ниже мой код:

App.js

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { createDrawerNavigator, createStackNavigator, } from 'react-navigation'

const reducer = (state = '', action) => {
  switch (action.type) {
    case 'UPDATE':
            return { facebookToken: action.payload}
  }
    return state
}

const store = createStore(reducer)

class App extends Component {
  render(){
    return(

      <Provider store={store}>
        <View style={{flex:1,backgroundColor:'transparent'}}>
          <AppDrawerNavigator/>
        </View>
      </Provider> 
    )
  }
}

LoginScreen.js

import { LoginButton, AccessToken } from 'react-native-fbsdk';
import {connect} from 'react-redux'

class LoginScreen extends Component{

  <View>
            <LoginButton
              onLoginFinished={
                (error, result) => {
                  if (error) {
                    console.log("login has error: " + result.error);
                  } else if (result.isCancelled) {
                    console.log("login is cancelled.");
                  } else {
                    this.props.navigation.navigate('VerifyScreen')
                    AccessToken.getCurrentAccessToken().then(
                      (data) => {
                        this.setState({facebookToken:data.accessToken},
                    () =>  console.log('facebookToken.state',this.state.facebookToken),
//Here I am getting undefined for 'this.props.facebookToken'                        
() =>  console.log('facebookToken.props',this.props.facebookToken),
                        console.log('facebook login success!'),
                        console.log('facebook token is:',data.accessToken.toString()))
                      }
                    )
                  }
                }
              }
              onLogoutFinished={() => console.log("logout.")}/>

//I created a button to see if I could call global state. but this would give me an error "state is not defined"
<Button
            title="call global state"
            onPress={() => this.props.increaseCounter()}/>


</View>

function mapStateToProps(state) {
    return {
        facebookToken: state.facebookToken
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'UPDATE',payload: state.facebookToken }),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

VerifyScreen.js

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {connect} from 'react-redux'


class VerifyScreen extends Component {
    render() {
        return (
        <View>
          <Button
                  title="Get facebook Access Token"
                  onPress={()=>  
                   //I get undefined data when I console.log
         console.log(this.state.facebookToken,'this.state.facebookToken')}/>
          <Text style={{ fontSize: 20 }}>{this.props.facebookToken}</Text>
        </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        facebookToken: state.facebookToken
    }
}

export default connect(mapStateToProps, null)(VerifyScreen)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

В моем LoginScreen, когда я получаю console.log this.state.facbookToken, я получаю данные, но когда я перехожу к следующему экрану (VerifyScreen) и console.log, я получаю undefined.

Мой вопрос: как я могу вызвать глобальное состояние с VerifyScreen?Я очень плохо знаком с редуксом, поэтому могу делать что-то не так.Любые советы или комментарии действительно помогут.Заранее спасибо!

Answer 1

На экране проверки вы пытаетесь консольно войти в this.state.facebookToken, который определенно не определен.Вместо этого попробуйте обновить код до this.props.facebookToken

console.log(this.props.facebookToken,'this.props.facebookToken')}/>

this.state предназначен для хранения состояния уровня компонента, когда вы говорите о глобальном состоянии, состояние избыточности находится в this.props.xxx в зависимости от mapStateToProps метод, который вы определили

ОБНОВЛЕНИЯ :

Проблемы, которые вы нарушаете,

Вы не передаете полезную нагрузку редуктору при отправкеaction

increaseCounter: ()=>dispatch({ type: 'UPDATE', payload: state.facebookToken })

Тогда в вашем App.js появится следующий код

switch (action.type) {
  case 'UPDATE':
    return { facebookToken: state.facebookToken}
}

Если вы посмотрите на приведенный выше код, вы можете заметить, что поток Redux работает следующим образом:попробуйте отправить action, который является объектом действия с двумя свойствами, type и payload (полезная нагрузка необязательна, или вы можете назвать его как угодно), тогда в вашем редукторе вы можете получить доступ к payload как показано ниже

switch (action.type) {
  case 'UPDATE':
    return { facebookToken: action.payload };
}

вам может быть интересно, что такое action.payload, значение которого мы предоставляем при отправке ранее dispatch({ type: 'UPDATE', payload: state.facebookToken }), поэтому action.payload просто равно state.facebookToken

Extra :

Конечно, в зависимости от вашего случая использования, но обычно, когда мыИзменив состояние в редукторе, мы хотели бы вернуть все остальные состояния и обновить только те конкретные состояния, которые были изменены, например, как показано ниже:

console.log(action);
switch (action.type) {
  case 'UPDATE':
    return { ...state, facebookToken: state.facebookToken };
}

Часто, когда я пытаюсь отладить проблемус Redux я сделаю console.log перед оператором switch, чтобы выяснить, какой тип я отправляю, какую полезную нагрузку я передаю, и, следовательно, console.log(action), которую вы сможете увидеть type свойство и значение payload свойство