Chat application code
All his components are just functions aka "stateless components". They just take some props
and render a component (html). The actions are passed as arguments.
There are constructors either.
Containers
Containers
wrap around components (again components are stateless) and subscribe to changes from Redux. They don't do anything, but when Redux changes, they pass in new props to the components.
There are only three containers for this app, an example:
// **** ApplicationContainer.js ****
import { connect } from 'react-redux';
import Application from '../components/Application';
import { signIn, signOut } from '../actions/auth';
const mapStateToProps = ({ auth }) => {
return { auth };
};
const mapDispatchToProps = (dispatch) => {
return {
signIn() { dispatch(signIn()); },
signOut() { dispatch(signOut()); }
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Application);
The above shows the example of forwarding the dispatch
function down to the component.
Reducers
For example:
// **** auth.js ****
import initialState from '../initial-state.js';
export default function authReducer(state = initialState.auth, action) {
switch(action.type) {
case 'ATTEMPTING_LOGIN':
return {
status: 'AWAITING_AUTH_RESPONSE'
};
case 'SIGN_OUT':
return {
status: 'ANONYMOUS',
email: null,
displayName: null,
photoURL: null,
uid: null
};
case 'SIGN_IN':
return {
status: 'SIGNED_IN',
email: action.email,
displayName: action.displayName,
photoURL: action.photoURL,
uid: action.uid
};
default:
return state;
}
}