如何使用Redux显示Firebase的请求结果？

Question

我是这里的新手，我希望我解决问题的方式足够明确。

基本上，在我在redux存储中创建的登录功能期间，正在检索一些有关用户的信息（例如名称），但是我无法在代码段中使用名称我需要的...实际上是因为自从过去四个月我学习编码以来，我不知道该怎么做:)

我认为所有基本知识都适合正在学习的人。

    import firebase from 'firebase';
    import b64 from 'base-64';

    import {
            MODIFY_EMAIL,
            MODIFY_PASSWORD,
            MODIFY_NAME,
            MODIFY_SURNAME,
            USER_REGISTER_ERROR,
            USER_REGISTER_SUCCESS,
            LOGIN_USER_ERROR,
            LOGIN_USER_SUCCESS,
            USERNAME_FETCH,
            } from './types';

    export const authenticateUser = ({ email, password }) => {
    //    alert('Chegamos aqui');
        return dispatch => {
            firebase.auth().signInWithEmailAndPassword( email, password 
    ) 
                .then(value => loginUserSuccess(dispatch))
                .then(value => usernameFetch(dispatch, email))
                .catch(error => loginUserError(error, dispatch));
        }
    }


    export const usernameFetch = (dispatch, email) => {
        let emailB64 = b64.encode(email);

        firebase.database().ref(`/users/${emailB64}/userdata/name`)
        .once('value', (data) => {
            let usernameFetch = data.val();
            console.log('Username retornado: ' + usernameFetch)

            dispatch   ({
                type: USERNAME_FETCH,
                payload: usernameFetch,
            })
        })
    }

    import {
        MODIFY_EMAIL,
        MODIFY_PASSWORD,
        MODIFY_NAME,
        MODIFY_SURNAME,
        USER_REGISTER_ERROR,
        USER_REGISTER_SUCCESS,
        LOGIN_USER_ERROR,
        LOGIN_USER_SUCCESS,
        USERNAME_FETCH,
        } from '../actions/types';

    const INITIAL_STATE = {
        name: '',
        surname: '',
        email: '',
        password: '',
        errorRegister: '',
        errorLogin: '',
        loginSuccess: false,
        usernameFetch: '',
    }

    export default (state = INITIAL_STATE, action) => {
        console.log(action, '- actions from AuthReducer');
        switch(action.type) {
            case MODIFY_EMAIL:
                return { ...state, email: action.payload}
            case USERNAME_FETCH: 
                return { ...state, usernameFetch: action.payload}
            default: 
                return state;
        }
    }

    class Settings extends Component {
     render() {
        const { profile, editing } = this.state;
        const { navigation } = this.props;

        console.log(usernameFetch + ' teste');

        return (
          <Block>
            <Block flex={false} row center space="between" 
      style={styles.header}>
              <Text h1 bold>Olá, {this.props.usernameFetch}. </Text>          
              <Button>
                <Image
                  source={profile.avatar}
                  style={styles.avatar}
                />
              </Button>
            </Block>
    {.more code down here.}

       )
      }
    }

    const mapStateToProps = state => (
      {
        usernameFetch: state.AuthenticationReducer.usernameFetch,
      }
    )


    export default connect(
      mapStateToProps, 
      {  
        usernameFetch,
      }
    )(Settings);

我希望结果是登录人员的姓名，而不是返回整个函数。

    console.log(usernameFetch + ' teste');

此console.log在此处返回代码...

    function usernameFetch(dispatch, email) {
        var emailB64 = _base.default.encode(email);

        _firebase.default.database()
     .ref("/users/" + emailB64 + "/userdata/name")
     .once('value', function (data) {
          var usernameFetch = data.val();
          console.log('Username retornado: ' + usernameFetch);
          dispatch({
            type: _types.USERNAME_FETCH,
            payload: usernameFetch
          });
        });
      } teste

但是console.log在这里

console.log(action, '- actions from AuthReducer');

正确返回名称。