Reactjs 如何使用此操作功能获取用户信息？

我实际上正在开发一个小的react应用程序，我有一个操作，根据uid检查firestore集合“users”中是否存在当前用户，然后获取用户的配置文件信息。 它实际上可以执行此操作，但我不能在我的配置文件组件中使用它来显示它

这是操作文件：

import 'firebase/firestore'
import firebase from 'firebase/app'

const getUser =()=>{ 
  return (dispatch)=>{
    firebase.auth().onAuthStateChanged(firebaseUser => {
      if(firebaseUser){
        firebase.firestore().collection("users").doc(firebaseUser.uid).get().then( doc => {
            const { displayName } = doc.data()
         //it works and it shows me on console the name i want
            console.log("display name in action: ",displayName)

            const currentUser = {
              uid: firebaseUser.uid,
              displayName
            }
            dispatch({
              type:'GET_USER',
              currentUser,
            })

        })
      }
    })
  }
}
export  default getUser ;

当我尝试将其登录到我的配置文件中时，它会显示以下错误“typeError:undefined不是对象（计算'this.props.getUser（）.currentUser'）”：

---

我希望显示我的显示名，但我得到了那个错误

你真的在找减速机。操作处理程序不是为将数据返回到组件而设计的。操作思想是将数据存储到reducer

下面的代码假设您已将react redux与应用程序正确连接

src/actions/userAction.js

import 'firebase/firestore'
import firebase from 'firebase/app'

export const getUser = () => {
    return (dispatch) => {
        firebase.auth().onAuthStateChanged(firebaseUser => {
            if (firebaseUser) {
                firebase.firestore().collection("users").doc(firebaseUser.uid).get().then(doc => {
                    const {displayName} = doc.data();

                    const currentUser = {
                        uid: firebaseUser.uid,
                        displayName
                    };

                    dispatch({
                        type: 'GET_USER',
                        payload: currentUser
                    });
                })
            }
        })
    }
};

src/reducers/userReducer.js

const INITIAL_STATE = {
    data: {},
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'GET_USER':
            return {
                ...state,
                data: action.payload
            };
        default:
            return state;
    }
};

src/reducers/index.js

import userReducer from "./userReducer";

export default {
    user: userReducer
};

src/components/Example.js

import React from 'react';
import connect from "react-redux/es/connect/connect";
import {getUser} from "../actions/userAction";

class Example extends React.Component {
    componentDidMount() {
        this.props.getUser();
    }

    render() {
        if (!Object.keys(this.props.user.data).length)
            return <div>Loading user's data</div>;

        return (
            <div>
                { JSON.stringify(this.props.user.data) }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user
    };
};

export default connect(mapStateToProps, {
    getUser,
})(Example);

从“React”导入React；
从“react redux/es/connect/connect”导入connect；
从“./actions/userAction”导入{getUser}；
类示例扩展了React.Component{
componentDidMount（）{
this.props.getUser（）；
}
render（）{
if（！Object.keys（this.props.user.data）.length）
返回加载用户的数据；
返回(
{JSON.stringify（this.props.user.data）}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
用户：state.user
};
};
导出默认连接（MapStateTops{
getUser，
})（示例）；

试试console.log（this.props）。也许一开始它不在那里，然后它就在那里later@azium事实上，这是正确的，首先它显示我未定义，然后它显示数据感谢您的回复，我已正确连接react redux与我的应用程序，但这不起作用，它首先显示文本加载用户的数据，然后显示空白页。Aaaa现在它起作用了，我只是删除条件来检查渲染中的数据。

import React from 'react';
import connect from "react-redux/es/connect/connect";
import {getUser} from "../actions/userAction";

class Example extends React.Component {
    componentDidMount() {
        this.props.getUser();
    }

    render() {
        if (!Object.keys(this.props.user.data).length)
            return <div>Loading user's data</div>;

        return (
            <div>
                { JSON.stringify(this.props.user.data) }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user
    };
};

export default connect(mapStateToProps, {
    getUser,
})(Example);