I am new in firebase and reactjs.I am trying to get data from firestore.I searched about this problem but could not find any answer. I saw this page too.but not exist right answer react-redux-firebase not populating profile in firebase reducerenter image description here there are my codes.it seems right but do not work.index.js file
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();
})
and this is signIn class codes
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)
sign in action
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 codes
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
rootReducer
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