如何在react-native-navigation中修复redux身份验证?

时间:2018-07-25 18:45:30

标签: react-native redux react-redux react-native-navigation

我正在使用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;

0 个答案:

没有答案