Sign On with Redux
We we'll implement the user.
- sign in action
- the sign in process and it's two branch (success, failure)
// **** index.js ****
import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
import initialState from './initial-state';
import Application from './containers/ApplicationContainer';
import './index.css';
const middleware = [ thunk ];
const enhancers = [];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(...middleware),
...enhancers
)
);
ReactDOM.render(
<Provider store={store}>
<Application />
</Provider>,
document.getElementById('root')
);
He's using middlewares :
redux-thunk
: can return a function as a result of an action that can later dispatch another action.
redux-devtools
Update sign in
This will be an asynchronous action. (on success will dispatch another action)
First just get an async action working with a simple setTimeout
.
// **** actions/auth.js ****
export const signIn = () => {
// **** ---- 1. remove the harcoded values. ↴
// return {
// type: 'SIGN_IN',
// email: 'bill@example.com',
// displayName: 'Bill Murray',
// photoURL: 'http://www.fillmurray.com/200/200',
// uid: 'firstUser'
// };
// **** 2 use the dispatch from redux-thunk. ↴
return dispatch => {
// **** 3. just dispatch at firt try. (immediate return) ↴
dispatch({type: 'ATTEMPINT_LOGIN' })
// **** 4 now async. ↴
setTimeout( () => {
dispatch({
type: 'SIGN_IN',
email: 'bill@example.com',
displayName: 'Bill Murray',
photoURL: 'http://www.fillmurray.com/200/200',
uid: 'firstUser'
})
}, 2000)
}
};
export const signOut = () => {
// **** 5 do the same for sign out. ↴
// return {
// type: 'SIGN_OUT'
// };
// **** 6 async logout. ↴
setTimeout(() => {
dispatch({
type: 'SIGN_OUT'
})
} , 2000)
};
The dispatch
from redux-thunk is a delayed notifier.
Use Firebase for authentication
He will use the Promise
API.
// **** actions/auth.js ****
// **** 1 add these. ↴
// these are just for formatting the data
export const signedIn = user => {
return {
{
type: 'SIGN_IN',
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
uid: user.uid
}
}
};
export const signedOut = () => {
return {
type: 'SIGN_OUT'
}
};
Authenticate with Firebase
// **** actions/auth.js ****
// **** 1. import some libraries. ↴
import { auth, googleAuthProvider } from '../firebase'
export const signIn = () => {
return dispatch => {
dispatch({type: 'ATTEMPINT_LOGIN' })
// **** 2 sign in with the popup. ↴
auth.signInWithPopup(googleAuthProvider).then(({user}) => {
dispatch(signedIn(user)) // sigendIn formmatter is just above...
})
}
};
export const signOut = () => {
// **** 3 sign out. ↴
auth.signOut().then(() => {
dispatch(signedOut())
})
};