我正在使用react-native-navigation
创建redux认证。它具有两种布局,可以通过存储验证状态进行切换。当我在xCode模拟器中启动应用程序并尝试进行身份验证时,它不会将Auth布局更改为Main。但是,当我启动Safari控制台以查看来自应用程序的消息时,身份验证工作正常,布局正在更改。请向我解释为什么会这样?
index.js
import React, { Component, } from 'react';
import { Navigation, } from 'react-native-navigation';
import { Provider, } from 'react-redux';
import store from './src/store';
import registerScreens from './src/screens';
registerScreens(store, Provider);
export default class App {
constructor () {
this.auth = false;
store.subscribe(this.onStoreUpdate.bind(this));
this.start();
}
onStoreUpdate () {
const state = store.getState();
// if I'am write alert(state.auth) here, it show me false
if (this.auth != state.auth) {
this.auth = state.auth;
this.start();
}
}
start () {
switch (this.auth) {
case false:
Navigation.startTabBasedApp({
tabs: [{
screen: 'navigation.AuthScreen',
}, {
screen: 'navigation.RegisterScreen',
},],
});
break;
case true:
Navigation.startSingleScreenApp({
screen: {
screen: 'navigation.MainScreen',
},
});
break;
}
}
}
const application = new App();
auth.screen.js
import React, { PropTypes, Component, } from 'react';
import { ... } from 'react-native';
import { bindActionCreators, } from 'redux';
import { connect, } from 'react-redux';
import * as actions from './../actions';
class AuthScreen extends Component {
constructor (props) {
super(props);
this.handlePressEnter = this.handlePressEnter.bind(this);
}
handlePressEnter () {
// if I'am commenting line bellow and line in last then((), auth works fine
this.props.actions.request(true);
jsonFetch(url, {}).then((value) => {
return this.props.actions.auth(true);
}).catch((errors) => {
console.log(errors);
}).then(() => {
/* * */
this.props.actions.request();
});
}
render () {
....
}
}
function mapStateToProps (state, ownProps) {
return {
loading: state.loading,
};
}
function mapDispatchToProps (dispatch) {
return {
actions: bindActionCreators(actions, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps) (AuthScreen);
actions/index.js
import * as constants from './../constants';
export const request = (state = false) => {
return {
type: constants.REQUEST,
payload: {
state,
},
};
}
export const auth = (state = false) => {
return {
type: constants.AUTH,
payload: {
state,
},
};
}
reducers/index.js
import { combineReducers, } from 'redux';
import * as constants from './../constants';
const loading = (state = false, action) => {
switch (action.type) {
case constants.REQUEST:
return action.payload.state;
default:
return state;
}
}
const auth = (state = false, action) => {
switch (action.type) {
case constants.AUTH:
return action.payload.state;
default:
return state;
}
}
const reducers = combineReducers({
loading,
auth,
});
export default reducers;
store.index.js
import { createStore, applyMiddleware, } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger, } from 'redux-logger';
import reducers from './../reducers';
const loggerMiddleware = createLogger();
const store = createStore(reducers, applyMiddleware(thunkMiddleware, loggerMiddleware));
export default store;