Приложение Никогда не меняет тип действия. Loggedin реагировать-нативный - PullRequest
0 голосов
/ 30 сентября 2019

Приложение никогда не переходит в состояние входа. Я не могу найти, что пошло не так. После входа в систему, приложение войдите в Facebook без каких-либо ошибок. Я также могу увидеть приложение из деятельности Facebook. Но состояние никогда не меняется на ВХОД. Он остается в состоянии загрузки

мой код редуктора:

function loginReducer(
state = {
    loading: false,
    loggedIn: false,
    error: null
},
action
){
switch(action.type){
    case 'LOADING' :
        return Object.assign({}, state, {
            loading: true
        });

    case 'LOGIN' : 
        return Object.assign({}, state, {
            loading: false,
            loggedIn: true,
            error: null,
        });

    case 'LOGOUT' :
        return Object.assign({}, state, {
            loading: false,
            loggedIn: false,
            error: null,
        });

    case 'ERROR' : {
        return Object.assign({}, state, {
            loading: false,
            loggedIn: false,
            error: action.err
        });
    }

    default: 
        return state;
    }
  }

  function profileReducer(
    state = {
    id: null,
    name: null,
    profileURL: null, 
    profileWidth: null,
    ProfileHeight: null,
}, action
){
switch(action.type){
    case 'ADD_USER' :
        return Object.assign({}, state, {
            id: action.id,
            name: action.name,
            profileURL: action.profileURL,
            profileWidth: action.profileWidth,
            ProfileHeight: action.ProfileHeight
        });

    default: 
        return state;
}
}

export default function reducers(state = {}, action){
return{
    login: loginReducer(state.login, action),
    profile: profileReducer(state.profile, action)
};
}

Мои действия в type.js

import {fbLogin, fbLogout} from '../API/fbapi';

export function attempt(){
   return {
      type: 'LOADING'
   };
 }

 export function errors(err){
    return {
      type: 'ERROR',
      err
    };
  }

export function loggedin(){
   return {
    type: 'LOGIN',
  };
 }

 export function loggedout(){
    return {
      type: 'LOGOUT'
   };
 }

export function addUser(id, name, profileURL, profileWidth, profileHeight) {
return {
    type: 'ADD_USER',
    id,
    name,
    profileURL,
    profileWidth,
    profileHeight
};
}


export function login(){
return dispatch => {
    dispatch(attempt());
    fbLogin().then((result)=>{
        dispatch(loggedin());
        dispatch(addUser(result.id, result.name, result.picture.data.url, result.picture.data.width, result.picture.data.height));
    }).catch((err)=>{
        dispatch(errors(err));
    });
};
}


export function logout(){
return dispatch =>{
    dispatch(attempt());
    fbLogout().then(()=>{
        dispatch(loggedout());
    });
};
}

FB API

import {config} from '../config/config';
import FBSDK from 'react-native-fbsdk';



const {LoginManager, GraphRequest, GraphRequestManager} = FBSDK;
const reqManager = new GraphRequestManager;


function getInfo(){
return new Promise((res, rej)=>{
    const req = new GraphRequest((err, result)=>{
        if(err){rej('error making request ' + err)}
        else{
            res(result);
        }
    }, config.fbUserRequest);
    reqManager.addRequest(req).start();
});
}

export function fbLogin(){
return new Promise((res, rej)=>{
    LoginManager.logInWithPermissions(config.fbReadPermission, (err, 
   result)=>{
        if(err){rej('error: ' + err)}
        else if(result.isCanclled){rej('error: Login Cancled')}
        else{
            getInfo().then((data)=>{
                res(data);
            }).catch((err)=>{rej(err)});
        }
    });
});
}

export function fbLogout(){
return new Promise((res)=>{
    LoginManager.logOut();
    return res();
})
}

Auth Container

import React, { Component} from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, Text, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreator from '../action/type';
import Login from './login';
import Profile from './user';


const styles = StyleSheet.create({
wrapper: {
    flex: 1,
    backgroundColor: "#FFFFFF",
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
},
text: {
    fontSize: 20,
    color: '#01579B'
}
})


 class MainView extends Component {
state = {}
render() {

    const { actions, login, profile } = this.props;
    let profileComp = <Profile onPress={() => actions.logout()} profile={profile} />;
    let loginComp = <Login onPress={() => actions.login()} />;

    if(Login.error){
        loginComp = <View><Login onPress={() => actions.login()} /><Text style={styles.text}>{login.error}</Text></View>;
    }
    if (login.loading) {
        loginComp = <ActivityIndicator size="large" color="#3b5998" />;
        profileComp = <ActivityIndicator size="large" color="#3b5998" />;
    }
    return (
        <View style={styles.wrapper}>
            {login.loggedIn ? <Profile onPress={() => actions.logout()} profile={profile} /> : <Login onPress={() => actions.login()} />}
        </View>
    );
}
}

MainView.propTypes = {
login: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired
} 

function mapStateToProps(state){
return {
    login: state.login,
    profile: state.profile
}
}

function mapDispatchToProps(dispatch){
return {
    actions: bindActionCreators(actionCreator, dispatch)
}
}

export default connect(mapStateToProps, mapDispatchToProps)(MainView);

App.js

import React, { Component } from 'react';
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
import {Provider} from 'react-redux';

import MainView from './src/component/main';
import reducers from './src/reducer/authreducer';

const logger = createLogger();
const storeMiddle = applyMiddleware(
  thunkMiddleware,
  logger
)(createStore);

const store = storeMiddle(reducers);

class App extends Component {
  state = {  }
  render() { 

return ( 
  <Provider store={store}>
    <MainView/>
  </Provider>
 );
  }
}

export default App;

Login.js

import React, { Component} from 'react';
import PropTypes from 'prop-types';

const { Text, TouchableOpacity } = React;

export default class Login extends Component {
render() {
    return (
        <TouchableOpacity onPress={this.props.onPress}>
            <Text>LogIn</Text>
        </TouchableOpacity>
    );
  }
  }

 Login.propTypes = {
   onPress: PropTypes.func.isRequired
  };
...