Доступ к реквизитам внутри компонента в React / Redux ES6

Question

Я только начал разрабатывать собственное приложение реагирования с использованием приставки, и я думаю, что меня смущает множество способов заставить работать экран входа в систему. Насколько я понимаю, избыточность используется для предотвращения передачи реквизита вниз по иерархии представлений и вместо этого использует хранилище, из которого props может быть извлечено с помощью mapStateToProps. Однако каждый компонент может иметь свои локальные параметры в State. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу распаковать props внутри Компонента, и я думаю, что на данный момент я запутался между различными шаблонами проектирования, которые я вижу в сети.

1. Ниже код работает для степень, по которой он попадает в бэкэнд, извлекает jwt. Но как мне получить доступ к jwt из хранилища внутри компонента?
2. Ниже я думаю, что имя пользователя должно быть частью хранилища, а не локальным состоянием, чтобы другие представления могли получить к нему доступ. Но я, кажется, не могу извлечь его из этого.пропс.

Спасибо за ваше время

Редуктор

export default(state = {}, action) => {
    switch(action.type) {
        case 'LOGIN':
            return {
                ...state,
                username: action.username,
            }
        case 'LOGIN_SUCCESS':
            return {
                ...state,
                jwt: action.payload.data
            }
        case 'LOGIN_FAIL':
            console.log(action.payload.data);
            return {
                ...state,
                jwt: undefined,
            }
        default:
            console.log('unhandled action')
            return state
    }
}

Действия

    return {
        type: 'LOGIN',
        username,
        payload: {
            request: { 
                url: '/api/token/obtain/',
                method: 'POST',
                data: {
                    username: username,
                    password: password,
                }
            }
        }
    }
}

Компонент

import React, { Component, Fragment } from 'react';
import { Text, View } from 'react-native';
import { Input, TextLink, Loading, Button } from './common';
import { onLogin } from '../actions/auth.js'
import { connect } from 'react-redux';

class LoginComponent extends Component {

    constructor(props) {
      super(props);
      this.state = {username: '', password: ''}; // Q2 How can I move the username to store and map to props using mapStateToProps?
    }


  render() {

    console.log(this.props); // Q1 Why does this.props not have username, password and jwt?


    return (
      <Fragment>
        <View>
          <View>
            <Input
              placeholder="username"
              label="Username"
              value={this.state.username}
              onChangeText={username => this.setState({ username })}
            />
          </View>

          <View>
            <Input
              secureTextEntry
              placeholder="password"
              label="Password"
              value={this.state.password}
              onChangeText={password => this.setState({ password })}
            />
          </View>

          <Text>
            {error}
          </Text>

          {!loading ?
            <Button onPress={() => this.props.onLogin(this.state.username, this.state.password)}>
              Login
            </Button>
            :
            <Loading size={'large'} />
          }

      </Fragment>
    );
  }
}

const mapStateToProps = state => {
    return {
        username: state.username,
        password: state.password,
        jwt: state.jwt,
    }
};


const mapDispatchToProps = {
    onLogin
};

export const Login = connect(mapStateToProps, mapDispatchToProps)(LoginComponent)

Родительский компонент

import React, { Component } from 'react';
import { View } from 'react-native';
import { Login } from '../components';
import { connect } from 'react-redux';

export default class Auth extends Component {

  render() {
    return(
      <View>
        <Login />
      </View>
    );
  }
}

Приложение дедушки. js

import React, { Component } from 'react';
import Auth from './screens/Auth';
import LoggedIn from './screens/LoggedIn';
import { createStore, applyMiddleware } from  'redux';
import { Provider, connect } from 'react-redux';
import axios from 'axios';
import axiosMiddleware from 'redux-axios-middleware';

import rootReducer from './reducers'

const client = axios.create({ //all axios can be used, shown in axios documentation
  baseURL:'http://10.0.2.2:8888',
});
const store = createStore(
    rootReducer,
    applyMiddleware(axiosMiddleware(client)),
);

class LoginGate extends Component {
    render() {
        if (this.props.jwt) {
          return (
            <LoggedIn />
          );
        } else {
          return (
            <Auth />
          );
        }       
    }
}

const ConnectedLoginGate = connect(state => ({
    jwt: state.jwt
}))(LoginGate)

export default class App extends Component {

  render() {
    return (
        <Provider store={store}>
            <ConnectedLoginGate />
        </Provider>         
    )
  }
}