When authentication is done I can see the actions updating and the reducer updating - but then mapstatetoprops
does not do anything with the new reducer state
The Store keeps logging the same state(initial state) on every update
import React from 'react';
import { bindActionCreators } from 'redux'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { Redirect } from 'react-router-dom'
import firebase from 'firebase';
import { connect } from 'react-redux';
import { signIn, signOut } from '../reducer/actions'
import { auth } from '../firebase'
class LoginPage extends React.PureComponent {
// Configure FirebaseUI.
uiConfig = {'FirebaseUI Config'}
componentDidMount = () => {
auth.onAuthStateChanged((user) => { // gets user object on authentication
console.log('OnAuthStateChanged', user)
console.log('Check If Props Change in AuthChange', this.props.isauthed)
if (user) {
this.props.signIn(user)
} else {
this.props.signOut(user)
}
});
}
render() {
console.log('Check If Props Change in Render', this.props.isauthed)
if (!this.props.isauthed) {
return (
<div>
<h1>My App</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()} />
</div>
);
}
return (
<Redirect to='/' />
)
}
}
export default (LoginPage);
JS that should dispatch and update the props
import { connect } from 'react-redux';
import { signIn, signOut } from '../reducer/actions'
import { bindActionCreators } from 'redux'
import LoginPage from './LoginPage';
const mapStateToProps = (state) => {
console.log('LOGINmapstatetoprops', state.Authed)
return {
isauthed: state.Authed.isauthed,
}
}
const mapDispatchToProps = (dispatch) => {
console.log('LOGINmapDISPATCHoprops')
return bindActionCreators({signIn, signOut}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
The reducer
import LoginPage from '../components/LoginPage';
import firebase from 'firebase';
const initialState = {
isauthed: false,
error: ''
}
const AuthReducer = (state = initialState, action) => {
console.log('this is an action', action)
switch (action.type) {
case 'IsSignedIn':
return {
...state,
isauthed: action.payload
}
break;
case 'IsNotSignedIn':
return {
...state,
isauthed: action.payload
}
break;
default: return state
}
}
export default AuthReducer;
This is the actions file
export const signIn = (user) => {
console.log('this is from actions', user)
return {
type: 'isSignedIn',
payload: true
}
}
export const signOut = (user) => {
console.log(user)
return {
type: 'isNotSignedIn',
payload: false
}
}
Redux Store
import { createStore } from 'redux';
import logger from 'redux-logger';
import { createEpicMiddleware } from 'redux-observable';
import {AllReducers} from './reducer/index';
//import rootEpic from './modules/rootEpic';
//const epicMiddleware = createEpicMiddleware(rootEpic);
const store = createStore(AllReducers);
store.subscribe(() => {
console.log('storeupdated', store.getState())
});
export default store;
CombineReducers Function
import {combineReducers} from 'redux'
import {AuthReducer} from './AuthReducer'
import {UserReducer} from './UserReducer'
export const AllReducers = combineReducers({
Authed: AuthReducer
User: UserReducer
})
Seems like you have a typo error between 'isSignedIn'
and 'IsSignedIn'
(first letter differ)
You could avoid that by using a variable declared in a separated file. I like to call it types.js
for the types of actions:
// types.js
export const IS_SIGNED_IN = 'isSignedInOrEvenWhateverButYouBetterKeepAClearName'
// (same with all your types)
And then you can import this variable in your other files. You won't have typos anymore!
P.S: you can find all these ideas in redux documentation