Javascript 使用redux全局反应本机传递状态

在我的应用程序中，LoginScreen（fristScreen）可以使用facebook登录，当用户成功登录时，应用程序会收到facebook

访问令牌，并导航到下一个屏幕（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> 
    )
  }
}

从'redux'导入{createStore}
从“react redux”导入{Provider}
从“react navigation”导入{createDrawerNavigator，createStackNavigator，}
const reducer=（状态=“”，操作）=>{
开关（动作类型）{
案例“更新”：
返回{facebookToken:action.payload}
}
返回状态
}
const store=createStore（reducer）
类应用程序扩展组件{
render（）{
返回(
)
}
}

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)

从'react native fbsdk'导入{LoginButton，AccessToken}；
从“react redux”导入{connect}
类LoginScreen扩展组件{
{
如果（错误）{
log（“登录有错误：+result.error”）；
}否则如果（结果被取消）{
log（“登录被取消”）；
}否则{
this.props.navigation.navigate（'VerifyScreen'）
AccessToken.getCurrentAccessToken（）。然后(
（数据）=>{
this.setState（{facebookToken:data.accessToken}，
（）=>console.log（'facebookToken.state'，this.state.facebookToken），
//在这里，我对“this.props.facebookToken”进行了未定义
（）=>console.log（'facebookToken.props'，this.props.facebookToken），
console.log（'facebook登录成功！'），
console.log（'facebook令牌为：'，data.accessToken.toString（）））
}
)
}
}
}
onLogoutFinished={（）=>console.log（“注销”）}/>
//我创建了一个按钮，看看是否可以调用全局状态。但这会给我一个错误“状态未定义”
this.props.increaseCounter（）}/>
函数MapStateTops（状态）{
返回{
facebookToken:state.facebookToken
}
}
功能图DispatchToprops（调度）{
返回{
increaseCounter:（）=>dispatch（{type:'UPDATE'，payload:state.facebookToken}），
}
}
导出默认连接（MapStateTrops、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'
    }
});

import React，{Component}来自“React”；
进口{
看法
文本，
样式表，
按钮
}从“反应本族语”；
从“react redux”导入{connect}
类验证屏幕扩展组件{
render（）{
返回(
//当我输入console.log时，我会得到未定义的数据
log（this.state.facebookToken，'this.state.facebookToken'）}/>
{this.props.facebookToken}
);
}
}
函数MapStateTops（状态）{
返回{
facebookToken:state.facebookToken
}
}
导出默认连接（mapStateToProps，null）（验证屏幕）
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
}
});

在我的LoginScreen中，当我使用console.log
this.state.facbookToken
时，我会得到数据，但当我导航到nextScreen（VerifyScreen）和console.log时，我会得到未定义的

我的问题：如何从VerifyScreen调用全局状态？
我对redux非常陌生，所以我可能做错了事情。任何建议或评论都会很有帮助。提前谢谢
 在验证屏幕中，您尝试控制台记录this.state.facebookToken，它肯定是未定义的。相反，尝试将代码更新为
this.props.facebookToken

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

this.state
用于保存组件级状态，当您谈论全局状态时，redux状态位于
this.props.xxx
中，具体取决于您定义的
MapStateTops
方法

更新：

你违反的问题是

在调度操作时，您没有将有效负载传递给减速器

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

然后在你的
App.js
中，你有以下代码

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

如果您查看上面的代码，您可以注意到Redux的流是这样工作的，我们尝试分派一个
操作
，这是一个具有两个属性的操作对象，
类型
和
有效负载
（有效负载是可选的，或者您可以随意命名），然后在您的reducer中，您可以访问
有效负载
，如下所示

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

您可能想知道什么是
action.payload
，我们在早些时候调度
dispatch（{type:'UPDATE'，payload:state.facebookToken}）
时提供了这个值，所以
action.payload
就是
state.facebookToken

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

额外的：

当然，这取决于您的用例，但通常当我们在reducer中返回一个状态时，我们希望返回所有其他状态，并且只更新更改的特定状态，例如如下所示：

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

通常，当我试图调试Redux的问题时，我会在
switch
语句之前执行
console.log
，以了解我正在调度的类型和传递的有效负载，从而可以看到
console.log（action）
属性，而
有效负载的价值
属性
非常感谢您的评论，它真的很有帮助。但是我将代码更改为
this.props.facebookToken
，但仍然得到
null
。你知道我做错了什么吗？非常感谢你的解释。我很肯定你解释得很好，我想接受你的回答。但是我仍然对redux有点困惑，所以请您提供