Приложение никогда не переходит в состояние входа. Я не могу найти, что пошло не так. После входа в систему, приложение войдите в 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
};