Handling data Redux - synced code and examples

Author: Seth Lemmons

26-redux-data/README.md

@@ -0,0 +1,15 @@
+# 26 Handling Data with Redux
+
+This subdirectory contains an app already generated with create-react-app, as
+described in the "Handling Data with Redux"  blog post (link here)
+
+To run the app server:
+
+```
+$ cd a-sync-to-async
+$ npm install
+$ npm start
+```
+
+A browser window will automatically open and will load the app.
+

26-redux-data/a-sync-to-async/public/user.json

@@ -1,9 +1,9 @@
 {
   "id": 1,
-  "name": "Bob Smith",
-  "email": "bob@smith.com",
-  "phone": "+1 (321) 123-4567",
-  "company": "Acme Inc",
-  "department": "Engineering",
-  "title": "Senior Software Engineer"
-}
+  "name": "Don Draper",
+  "email": "don.draper@scdp.com",
+  "phone": "+1 (212) 555-0112",
+  "company": "Sterling Cooper Draper Pryce",
+  "department": "Marketing",
+  "title": "Creative Director"
+}

26-redux-data/a-sync-to-async/src/App.js

@@ -1,23 +1,4 @@
 import React, { Component } from 'react'
-import logo from './logo.svg'
-import './App.css'
 import Form from './containers/user/Update'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-        <Form />
-      </div>
-    )
-  }
-}
-
-export default App
+export default () => <Form />;

26-redux-data/a-sync-to-async/src/actions/index.js

@@ -1,9 +1,3 @@
-import {
-  LOAD_USER, loadUser,
-  UPDATE_USER, updateUser
-} from './user'
+import { LOAD_USER, loadUser, UPDATE_USER, updateUser } from './user';
 
-export {
-  LOAD_USER, loadUser,
-  UPDATE_USER, updateUser
-}
+export { LOAD_USER, loadUser, UPDATE_USER, updateUser };

26-redux-data/a-sync-to-async/src/actions/user.js

@@ -1,35 +1,37 @@
-export const LOADING_USER = 'LOADING_USER'
-export const LOAD_USER = 'LOAD_USER'
-export const LOAD_USER_ERROR = 'LOAD_USER_ERROR'
-export const UPDATE_USER = 'UPDATE_USER'
+export const LOADING_USER = 'LOADING_USER';
+export const LOAD_USER = 'LOAD_USER';
+export const LOAD_USER_ERROR = 'LOAD_USER_ERROR';
+export const UPDATE_USER = 'UPDATE_USER';
 
-export function loadUser (id) {
+export function loadUser(id) {
   return dispatch => {
     dispatch({
       type: LOADING_USER,
       data: {
         id
       }
-    })
+    });
 
     return fetch('/user.json')
       .then(res => res.json())
       .then(
-        data => dispatch({
-          type: LOAD_USER,
-          data
-        }),
-        error => dispatch({
-          type: LOAD_USER_ERROR,
-          error
-        })
-      )
-  }
+        data =>
+          dispatch({
+            type: LOAD_USER,
+            data
+          }),
+        error =>
+          dispatch({
+            type: LOAD_USER_ERROR,
+            error
+          })
+      );
+  };
 }
 
-export function updateUser (change) {
+export function updateUser(change) {
   return {
     change,
     type: UPDATE_USER
-  }
+  };
 }

26-redux-data/a-sync-to-async/src/components/user/Form.js

@@ -1,33 +1,45 @@
-import React from 'react'
+import React from 'react';
 
-const renderField = (props, name, label = name.substr(0, 1).toUpperCase() + name.substr(1)) => (
-  <div>
-    <label>
+const renderField = (
+  props,
+  name,
+  label = name.substr(0, 1).toUpperCase() + name.substr(1)
+) => (
+  <div style={{ marginBottom: '12px' }}>
+    <label style={{textTransform: 'capitalize'}}>
       {label}
       <input
         type="text"
         name={name}
-        value={props[ name ]}
+        value={props[name]}
         onChange={props.onFieldChange}
-        />
+        style={{ marginLeft: '12px' }}
+      />
     </label>
   </div>
-)
+);
 
-const Form = (props) => {
-  props.loadUser(props.id)
+const Form = props => {
+  props.loadUser(props.id);
+
+  const submit = e => {
+    e.preventDefault();
+
+    // do submit
+  };
 
   return (
     <form>
-      <div>ID: {props.id}</div>
-      { renderField(props, 'name') }
-      { renderField(props, 'email') }
-      { renderField(props, 'phone', 'Phone Number') }
-      { renderField(props, 'company') }
-      { renderField(props, 'department') }
-      { renderField(props, 'title') }
+      {renderField(props, 'name')}
+      {renderField(props, 'email')}
+      {renderField(props, 'phone', 'Phone Number')}
+      {renderField(props, 'company')}
+      {renderField(props, 'department')}
+      {renderField(props, 'title')}
+
+      <button onClick={submit}>Submit</button>
     </form>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;

26-redux-data/a-sync-to-async/src/containers/user/Update.js

@@ -1,21 +1,18 @@
-import { connect } from 'react-redux'
-import { loadUser, updateUser } from '../../actions'
-import Form from '../../components/user/Form'
+import { connect } from 'react-redux';
+import { loadUser, updateUser } from '../../actions';
+import Form from '../../components/user/Form';
 
-const mapStateToProps = state => Object.assign({}, state.user)
+const mapStateToProps = state => Object.assign({}, state.user);
 
 const mapDispatchToProps = dispatch => ({
   loadUser: id => dispatch(loadUser(id)),
 
   onFieldChange: e => {
-    const { name, value } = e.target
-    const change = { [ name ]: value }
+    const { name, value } = e.target;
+    const change = { [name]: value };
 
-    dispatch(updateUser(change))
+    dispatch(updateUser(change));
   }
-})
+});
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Form)
+export default connect(mapStateToProps, mapDispatchToProps)(Form);

26-redux-data/a-sync-to-async/src/index.js

@@ -1,26 +1,21 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
-import registerServiceWorker from './registerServiceWorker'
-import { Provider } from 'react-redux'
-import { applyMiddleware, createStore } from 'redux'
-import thunk from 'redux-thunk'
-import userApp from './reducers'
-import { composeWithDevTools } from 'redux-devtools-extension'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+import { Provider } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import thunk from 'redux-thunk';
+import userApp from './reducers';
+import { composeWithDevTools } from 'redux-devtools-extension';
 
-const store = createStore(
-  userApp,
-  composeWithDevTools(
-    applyMiddleware(thunk)
-  )
-)
+const store = createStore(userApp, composeWithDevTools(applyMiddleware(thunk)));
 
 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
-)
+);
 
-registerServiceWorker()
+registerServiceWorker();

26-redux-data/a-sync-to-async/src/reducers/index.js

@@ -1,6 +1,6 @@
-import { combineReducers } from 'redux'
-import user from './user'
+import { combineReducers } from 'redux';
+import user from './user';
 
-const userApp = combineReducers({ user })
+const userApp = combineReducers({ user });
 
-export default userApp
+export default userApp;

26-redux-data/a-sync-to-async/src/reducers/user.js

@@ -1,27 +1,24 @@
-import { LOAD_USER, UPDATE_USER } from '../actions'
+import { LOAD_USER, UPDATE_USER } from '../actions';
 
 const DEFAULT_USER = {
   id: 0,
-  name: '', email: '', phone: '',
-  company: '', department: '', title: ''
-}
+  name: '',
+  email: '',
+  phone: '',
+  company: '',
+  department: '',
+  title: ''
+};
 
-function user (user = DEFAULT_USER, action) {
+function user(user = DEFAULT_USER, action) {
   switch (action.type) {
     case UPDATE_USER:
-      return Object.assign(
-        {},
-        user,
-        action.change
-      )
+      return Object.assign({}, user, action.change);
     case LOAD_USER:
-      return Object.assign(
-        {},
-        action.data
-      )
+      return Object.assign({}, action.data);
     default:
-      return user
+      return user;
   }
 }
 
-export default user
+export default user;