use redux and react-redux

Author: rwieruch

src/components/Account/index.js

@@ -1,19 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'recompose';
 
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
 import withAuthorization from '../Session/withAuthorization';
 
-const AccountPage = (props, { authUser }) =>
+const AccountPage = ({ authUser }) =>
   <div>
     <h1>Account: {authUser.email}</h1>
     <PasswordForgetForm />
     <PasswordChangeForm />
   </div>
 
-AccountPage.contextTypes = {
-  authUser: PropTypes.object,
-};
+const mapStateToProps = (state) => ({
+  authUser: state.sessionState.authUser,
+});
 
-export default withAuthorization(true)(AccountPage);
+export default compose(
+  withAuthorization(true),
+  connect(mapStateToProps)
+)(AccountPage);

src/components/Home/index.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'recompose';
 
 import withAuthorization from '../Session/withAuthorization';
 import { db } from '../../firebase';
@@ -9,27 +11,23 @@ const fromObjectToList = (object) =>
     : [];
 
 class HomePage extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      users: []
-    };
-  }
-
   componentDidMount() {
+    const { onSetUsers } = this.props;
+
     db.onceGetUsers().then(snapshot =>
-      this.setState(() => ({ users: fromObjectToList(snapshot.val()) }))
+      onSetUsers(fromObjectToList(snapshot.val()))
     );
   }
 
   render() {
+    const { users } = this.props;
+
     return (
       <div>
         <h1>Home</h1>
         <p>The Home Page is accessible by every signed in user.</p>
 
-        { !!this.state.users.length && <UserList users={this.state.users} /> }
+        { !!users.length && <UserList users={users} /> }
       </div>
     );
   }
@@ -43,4 +41,15 @@ const UserList = ({ users }) =>
     )}
   </div>
 
-export default withAuthorization(true)(HomePage);
+const mapStateToProps = (state) => ({
+  users: state.userState.users,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  onSetUsers: (users) => dispatch({ type: 'USERS_SET', users }),
+});
+
+export default compose(
+  withAuthorization(true),
+  connect(mapStateToProps, mapDispatchToProps)
+)(HomePage);

src/components/Navigation/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
 
 import SignOutButton from '../SignOut';
 
-const Navigation = (props, { authUser }) =>
+const Navigation = ({ authUser }) =>
   <div>
     { authUser
         ? <NavigationAuth />
         : <NavigationNonAuth />
     }
   </div>
 
-Navigation.contextTypes = {
-  authUser: PropTypes.object,
-};
-
 const NavigationAuth = () =>
   <ul>
     <li><Link to="/">Landing</Link></li>
@@ -30,4 +26,8 @@ const NavigationNonAuth = () =>
     <li><Link to="/signin">Sign In</Link></li>
   </ul>
 
-export default Navigation;
+const mapStateToProps = (state) => ({
+  authUser: state.sessionState.authUser,
+});
+
+export default connect(mapStateToProps)(Navigation);

src/components/Session/withAuthentication.js

@@ -1,29 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 import { firebase } from '../../firebase';
 
 const withAuthentication = (Component) => {
   class WithAuthentication extends React.Component {
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        authUser: null,
-      };
-    }
-
-    getChildContext() {
-      return {
-        authUser: this.state.authUser,
-      };
-    }
-
     componentDidMount() {
+      const { onSetAuthUser } = this.props;
+
       firebase.auth.onAuthStateChanged(authUser => {
         authUser
-          ? this.setState(() => ({ authUser }))
-          : this.setState(() => ({ authUser: null }));
+          ? onSetAuthUser(authUser)
+          : onSetAuthUser(null);
       });
     }
 
@@ -34,11 +22,11 @@ const withAuthentication = (Component) => {
     }
   }
 
-  WithAuthentication.childContextTypes = {
-    authUser: PropTypes.object,
-  };
+  const mapDispatchToProps = (dispatch) => ({
+    onSetAuthUser: (authUser) => dispatch({ type: 'AUTH_USER_SET', authUser }),
+  });
 
-  return WithAuthentication;
+  return connect(null, mapDispatchToProps)(WithAuthentication);
 }
 
 export default withAuthentication;

src/index.js

@@ -1,8 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import './index.css';
 import App from './components/App';
+import store from './store';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
+
 registerServiceWorker();

src/reducers/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import sessionReducer from './session';
+import userReducer from './user';
+
+const rootReducer = combineReducers({
+  sessionState: sessionReducer,
+  userState: userReducer,
+});
+
+export default rootReducer;

src/reducers/session.js

@@ -0,0 +1,19 @@
+const INITIAL_STATE = {
+  authUser: null,
+};
+
+const applySetAuthUser = (state, action) => ({
+  ...state,
+  authUser: action.authUser
+});
+
+function sessionReducer(state = INITIAL_STATE, action) {
+  switch(action.type) {
+    case 'AUTH_USER_SET' : {
+      return applySetAuthUser(state, action);
+    }
+    default : return state;
+  }
+}
+
+export default sessionReducer;

src/reducers/user.js

@@ -0,0 +1,19 @@
+const INITIAL_STATE = {
+  users: [],
+};
+
+const applySetUsers = (state, action) => ({
+  ...state,
+  users: action.users
+});
+
+function userReducer(state = INITIAL_STATE, action) {
+  switch(action.type) {
+    case 'USERS_SET' : {
+      return applySetUsers(state, action);
+    }
+    default : return state;
+  }
+}
+
+export default userReducer;

src/store/index.js

@@ -0,0 +1,6 @@
+import { createStore } from 'redux';
+import rootReducer from '../reducers';
+
+const store = createStore(rootReducer);
+
+export default store;