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

Question

我实际上正在开发一个小型React应用程序，我有一个操作要检查当前用户是否基于uid在firestore集合“用户”上存在，然后再获取用户的个人资料信息。 它实际上可以执行此操作，但是我无法在个人资料组件中使用它来显示它！

那是动作文件：

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'） ”：

console.log("getting current user: ", this.props.getUser().currentUser )

我希望向我显示displayName，但出现错误！

Answer 1

您实际上正在寻找减速器。 动作处理程序并非旨在将数据返回到您的组件。 动作思路是将数据存储到减速器中。

以下代码假定您已将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);