реактивно-нативная установка с использованием приставки - PullRequest
Новая
       40

реактивно-нативная установка с использованием приставки

0 голосов
/ 17 октября 2018

Я пытаюсь установить состояние с использованием приставки.Я использую Facebook для входа в систему, и как только я получаю facebookAccessToken, я хочу установить его в глобальное состояние с использованием приставки и перезвонить в глобальное состояние с помощью кнопки.Ниже мой код:

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{
    render() {
        return(

      <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.updateState()}/>


    </View>
      )
   }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

Мой вопрос: 1) По моему LoginScreen почему я получаю undefined для «this.props.facebookToken» это потому, что я не вызывал функцию «updateState»?

2) В моем «Экране входа» после успешного входа в систему с Facebook я получаю AccessToken ипри условии, что this.props.facebookToken установлен на data.accessToken.Поэтому, когда я нажимаю кнопку, я ожидаю получить globalState, но это дает мне ошибку state не определено.

Я действительно новичок в редукции, поэтому любые комментарии или советы будут действительно полезны.Заранее спасибо!

1 Ответ

0 голосов
/ 17 октября 2018

Для вашего вопроса № 1 вы правы, потому что вы не вызывали метод updateState.

Для вашего вопроса № 2 попробуйте это.Состояние никогда не определяется в этом блоке кода, потому что вы не передали объект состояния. 

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

измените его на 

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

, затем измените 

onPress={() => this.props.updateState()}

до 

onPress={() => this.props.updateState(this.state)}
...