Не могу вывести токен в компоненте. Авторизация на React Native + Redux. Почему?

Question

[paketik0chaya]

Доброго времени суток!
Продолжаю изучать redux в связке с react-native.
Необходимо сделать авторизацию.В ответ на пост-запрос приходит токен. Он(токен) отображается в консоли.
При выводе токена с помощью console.log в компоненте, токен равен undefined,
Не могу понять как его вывести/использовать в компоненте. В чем ошибка? #noob
Action's вместе с константами:

const LOGIN_REQUEST  = 'LOGIN_REQUEST ';
const LOGIN_ERROR = 'LOGIN_ERROR';
const LOGIN_SUCCESS= 'LOGIN_SUCCESS';

export const setLoginPending = () => {
    return {
        type: LOGIN_REQUEST,
    };
};

export const setLoginSuccess = (tokenAuth) => {
    return {
        type: LOGIN_SUCCESS,
        tokenAuth,
    };
};

export const setLoginError = (loginError) => {
    return {
        type: LOGIN_ERROR,
        loginError
    }
};

export function authorization(email, password) {
    return (dispatch) => {
        dispatch(setLoginPending());
        axios({
            method: 'POST',
            url: 'http://myrmic.geos.tom.ru:2180/v1/auth',
            headers: {
                'Content-Type': 'application/json',
                'Accept' : 'application/json'
            },
            data: {
                ur_email: email = '[e-mail]',
                ur_password: password = '123456',
            }
        })
            .then((response) => {
                dispatch(setLoginSuccess(response.data))
            })
            .catch((error) => {
                dispatch(setLoginError(error));
            })
    };
}

Reducer:

export default function authReducer(state = {
    tokenAuth: false,
    isLoginPending: false,
    loginError: null,
}, action) {
    switch (action.type) {
        case LOGIN_REQUEST:
            return {
                ...state,
                isLoginPending: true,
            };
        case LOGIN_SUCCESS:
            return {
                ...state,
                tokenAuth: action.tokenAuth,
                isLoginPending: false,
            };
        case LOGIN_ERROR:
            return {
                ...state,
                isLoginPending: false,
                loginError: action.loginError
            };
        default:
            return state;
    }
}

Как использую в компоненте:

...
import { authorization  } from './reducers/authorization';
...
render(){
const {email, password} = this.state;
        let {isLoginPending, loginError} = this.props.login;
        let { tokenAuth } = this.props;
        console.log(tokenAuth);      // 'undefined'
        console.log({tokenAuth});      // 'token: undefined'
...
<View style={styles.row}>
                    <Button block large
                               onPress={this.auth}
                                style={{backgroundColor: '#00BFFF'}}>
                     <Text style={{color: '#000000'}}>Войти</Text>
            </Button>
</View>
{
                                tokenAuth &&
                                <View style={stylesObjL.objectBlock}>
                                    <Text style={{color: 'white'}}>{{tokenAuth}}</Text>
                                </View>
                            }
                            {
                                isLoginPending &&
                                <View style={stylesObjL.spinner}>
                                    <Spinner color='#00BFFF'/>
                                </View>
                            }
                            {
                                loginError && <Text style={{color: 'white'}}>{loginError}</Text>
                            }
...
}

Comments

[vaskadogana]

всё никак не узнаю, а для приложений андроид, иос используется обычный css?

[davidnum95]

vaskadogana, подобие

Answer 1

[vaskadogana]

не вижу чтобы у вас компонент был подписан на редюсер, если подписать как показано ниже, он будет доступен в пропс
типа

export default connect(
      state => ({
        data: state.globalR.controlR.transport_list,// имя пропс: ваш путь к значению в store
      })
)(SelectList)

для этого вам потребуются следующие библиотеки

import { Provider, connect} from 'react-redux'
import { bindActionCreators, applyMiddleware} from 'redux' //это для слушания необязательно