Merge pull request #34 from ModusCreateOrg/application-state-redux-2

redux state - update examples and repo

Author: mschwartz

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

@@ -1,13 +1,4 @@
-import React, { Component } from 'react';
-import Form from './components/user/Form';
-import './App.css';
+import React from 'react';
+import Form from './containers/user/Update';
 
-class App extends Component {
-  render() {
-    return (
-      <Form/>
-    );
-  }
-}
-
-export default App;
+export default () => <Form />;

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

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

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

@@ -0,0 +1,8 @@
+export const UPDATE_USER = 'UPDATE_USER';
+
+export function updateUser (change) {
+  return {
+    change,
+    type: UPDATE_USER
+  };
+}

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

@@ -1,34 +1,38 @@
 import React from 'react';
 
-const renderField = (props, name, label = name.substr(0, 1).toUpperCase() + name.substr(1)) => {
+const renderField = (
+  props,
+  name,
+  label = name
+) => {
   return (
-    <div>
-      <label>
+    <div style={{ marginBottom: '12px' }}>
+      <label style={{textTransform: 'capitalize'}}>
         {label}
         <input
           type="text"
           name={name}
-          value={props[ name ]}
-          onChange={props.onFieldChange}
-          />
+          value={props[name]}
+          onChange={props.handleFieldChange}
+          style={{ marginLeft: '12px' }}
+        />
       </label>
     </div>
   );
 };
 
-const Form = (props) => {
+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') }
+      {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,20 @@
+import { connect } from 'react-redux';
+import { updateUser } from '../../actions';
+import Form from '../../components/user/Form';
+
+const mapStateToProps = state => {
+  return Object.assign({}, state.user);
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    handleFieldChange: e => {
+      const { name, value } = e.target;
+      const change = { [name]: value };
+
+      dispatch(updateUser(change));
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Form);

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

@@ -4,5 +4,20 @@ import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import userApp from './reducers';
+
+const store = createStore(
+  userApp,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
+
 registerServiceWorker();

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

@@ -3,5 +3,4 @@ import user from './user';
 
 const userApp = combineReducers({ user });
 
-export default userApp;
-
+export default userApp;

23-redux-state/a-application-state-redux/src/reducers/userApp.js renamed to 23-redux-state/a-application-state-redux/src/reducers/index.js

@@ -2,26 +2,21 @@ import { UPDATE_USER } from '../actions';
 
 const DEFAULT_USER = {
   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'
 };
 
-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);
     default:
       return user;
   }
 }
 
 export default user;
-