reactjs - userfirestoreforprofile 为真，但未在控制台的 firebase.profile 中显示数据

问题描述

我是firebase和reactjs的新手。我正在尝试从firestore获取数据。我搜索了这个问题，但找不到任何答案。我也看到了这个页面。但不存在正确答案 react-redux-firebase 没有在 firebase reducer 中填充配置文件在此处输入图像描述有我的代码。看起来正确但不起作用.index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore, applyMiddleware, compose} from 'redux'
import rootReducer from "./store/reducers/rootReducer";
import {Provider} from 'react-redux'
import thunk from "redux-thunk";
import {reduxFirestore, getFirestore} from 'redux-firestore';
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase';
import fbConfig from './config/fbConfig'
import firebase from "firebase";

const store = createStore(rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, {userProfile: 'users', useFirestoreForProfile: true, attachAuthIsReady: true})
        )
);
store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById('root'));
    serviceWorker.unregister();

})

这是登录类代码

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {signIn} from "../../store/actions/authActions";
import {Redirect} from 'react-router-dom'

class SignIn extends Component {
    state = {
        email: '',
        password: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.signIn(this.state);
    }

    render() {
        const {authError, auth} = this.props;
        if (auth.uid) return <Redirect to='/'/>
        return (
            <div className='container'>
                <form onSubmit={this.handleSubmit} className="white">
                    <h5 className='grey-text text-darken-3'>Sign In</h5>
                    <div className="input-field">
                        <label htmlFor="email">Email</label>
                        <input type="email" id='email' onChange={this.handleChange}/>
                    </div>
                    <div className="input-field">
                        <label htmlFor="password">Password</label>
                        <input type="password" id='password' onChange={this.handleChange}/>
                    </div>
                    <div className="input-field">
                        <button className='btn pink lighten-1 z-depth-0'>LogIn</button>
                        <div className="red-text center">
                            {authError ? <p>{authError}</p> : null}
                        </div>
                    </div>
                </form>
            </div>
        )
    }
};
const mapStateToProps = (state) => {
    return {
        authError: state.auth.authError,
        auth: state.firebase.auth
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        signIn: (creds) => dispatch(signIn(creds))
    }

}
export default connect(mapStateToProps, mapDispatchToProps)(SignIn)

登录行动

export const signIn = (credentials) => {
    return (dispatch, getState, {getFirebase}) => {
        const firebase = getFirebase();
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({type: 'LOGIN_SUCCESS'})
        }).catch((err) => {
            dispatch({type: 'LOGIN_ERROR', err})
        })
    }
};

authReducer 代码

const initState = {};

const authReducer = (state = initState, action) => {
    switch (action.type) {
        case 'LOGIN_ERROR':
            console.log('login error')
            return {
                ...state,
                authError: 'LoginFailed'
            };
        case 'LOGIN_SUCCESS':
            console.log('login success')
            return {
                ...state,
                authError: null
            };
        case 'SIGNOUT_SUCCESS':
            console.log('signout success');
            return state;
        case 'SIGNUP_SUCCESS':
            console.log('signup success');
            return {
                ...state,
                authError: null
            };
        case 'SIGNUP_ERROR':
            console.log('signup error');
            return {
                ...state,
                authError: action.err.message
            };
        default:
            return state;
    }
    return state
}
export default authReducer

根减速器

import authReducer from "./authReducer";
import projectReducer from "./projectReducer";
import {combineReducers} from 'redux'
import {firestoreReducer} from 'redux-firestore'
import {firebaseReducer} from "react-redux-firebase";

const rootReducer = combineReducers({
    auth: authReducer,
    project: projectReducer,
    firestore:firestoreReducer,
    firebase:firebaseReducer
});
export default rootReducer

标签： reactjsfirebasegoogle-cloud-firestorefirebase-authentication

reactjs - userfirestoreforprofile 为真，但未在控制台的 firebase.profile 中显示数据

问题描述

解决方案

推荐阅读