redux implemented

Author: mschwartz

23-redux-state/a-application-state-redux/src/App.js

@@ -1,19 +1,11 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import Form from './components/user/Form';
 import './App.css';
 
 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>
-      </div>
+      <Form/>
     );
   }
 }

23-redux-state/a-application-state-redux/src/actions/index.js

@@ -0,0 +1,8 @@
+import {
+  UPDATE_USER, updateUser
+} from './user';
+
+export {
+  UPDATE_USER, updateUser
+};
+

23-redux-state/a-application-state-redux/src/components/user/Form.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const renderField = (props, name, label = name.substr(0, 1).toUpperCase() + name.substr(1)) => {
+  return (
+    <div>
+      <label>
+        {label}
+        <input
+          type="text"
+          name={name}
+          value={props[ name ]}
+          onChange={props.onFieldChange}
+          />
+      </label>
+    </div>
+  );
+};
+
+const Form = (props) => {
+  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') }
+    </form>
+  );
+};
+
+export default Form;
+

23-redux-state/a-application-state-redux/src/components/user/Update.js

@@ -0,0 +1,27 @@
+import { UPDATE_USER } from '../actions';
+
+const DEFAULT_USER = {
+  id: 1,
+  name: 'Bob Smith',
+  email: '[email protected]',
+  phone: '+1 (321) 123-4567',
+  company: 'Acme Inc',
+  department: 'Engineering',
+  title: 'Senior Software Engineer'
+};
+
+function user (user = DEFAULT_USER, action) {
+  switch (action.type) {
+    case UPDATE_USER:
+      return Object.assign(
+        {},
+        user,
+        action.change
+      );
+    default:
+      return user;
+  }
+}
+
+export default user;
+

23-redux-state/a-application-state-redux/src/reducers/user.js

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