Skip to content

Commit 9e3c564

Browse files
authored
Merge pull request #34 from ModusCreateOrg/application-state-redux-2
redux state - update examples and repo
2 parents f89503e + 1c158b3 commit 9e3c564

File tree

9 files changed

+76
-49
lines changed

9 files changed

+76
-49
lines changed
Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
import React, { Component } from 'react';
2-
import Form from './components/user/Form';
3-
import './App.css';
1+
import React from 'react';
2+
import Form from './containers/user/Update';
43

5-
class App extends Component {
6-
render() {
7-
return (
8-
<Form/>
9-
);
10-
}
11-
}
12-
13-
export default App;
4+
export default () => <Form />;
Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import {
2-
UPDATE_USER, updateUser
3-
} from './user';
4-
5-
export {
6-
UPDATE_USER, updateUser
7-
};
1+
import { UPDATE_USER, updateUser } from './user';
82

3+
export { UPDATE_USER, updateUser };
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const UPDATE_USER = 'UPDATE_USER';
2+
3+
export function updateUser (change) {
4+
return {
5+
change,
6+
type: UPDATE_USER
7+
};
8+
}

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
import React from 'react';
22

3-
const renderField = (props, name, label = name.substr(0, 1).toUpperCase() + name.substr(1)) => {
3+
const renderField = (
4+
props,
5+
name,
6+
label = name
7+
) => {
48
return (
5-
<div>
6-
<label>
9+
<div style={{ marginBottom: '12px' }}>
10+
<label style={{textTransform: 'capitalize'}}>
711
{label}
812
<input
913
type="text"
1014
name={name}
11-
value={props[ name ]}
12-
onChange={props.onFieldChange}
13-
/>
15+
value={props[name]}
16+
onChange={props.handleFieldChange}
17+
style={{ marginLeft: '12px' }}
18+
/>
1419
</label>
1520
</div>
1621
);
1722
};
1823

19-
const Form = (props) => {
24+
const Form = props => {
2025
return (
2126
<form>
2227
<div>ID: {props.id}</div>
23-
{ renderField(props, 'name') }
24-
{ renderField(props, 'email') }
25-
{ renderField(props, 'phone', 'Phone Number') }
26-
{ renderField(props, 'company') }
27-
{ renderField(props, 'department') }
28-
{ renderField(props, 'title') }
28+
{renderField(props, 'name')}
29+
{renderField(props, 'email')}
30+
{renderField(props, 'phone', 'Phone Number')}
31+
{renderField(props, 'company')}
32+
{renderField(props, 'department')}
33+
{renderField(props, 'title')}
2934
</form>
3035
);
3136
};
3237

3338
export default Form;
34-

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

Whitespace-only changes.
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { connect } from 'react-redux';
2+
import { updateUser } from '../../actions';
3+
import Form from '../../components/user/Form';
4+
5+
const mapStateToProps = state => {
6+
return Object.assign({}, state.user);
7+
};
8+
9+
const mapDispatchToProps = dispatch => {
10+
return {
11+
handleFieldChange: e => {
12+
const { name, value } = e.target;
13+
const change = { [name]: value };
14+
15+
dispatch(updateUser(change));
16+
}
17+
};
18+
};
19+
20+
export default connect(mapStateToProps, mapDispatchToProps)(Form);

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,20 @@ import './index.css';
44
import App from './App';
55
import registerServiceWorker from './registerServiceWorker';
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
import { Provider } from 'react-redux';
8+
import { createStore } from 'redux';
9+
import userApp from './reducers';
10+
11+
const store = createStore(
12+
userApp,
13+
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
14+
);
15+
16+
ReactDOM.render(
17+
<Provider store={store}>
18+
<App />
19+
</Provider>,
20+
document.getElementById('root')
21+
);
22+
823
registerServiceWorker();

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@ import user from './user';
33

44
const userApp = combineReducers({ user });
55

6-
export default userApp;
7-
6+
export default userApp;

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,21 @@ import { UPDATE_USER } from '../actions';
22

33
const DEFAULT_USER = {
44
id: 1,
5-
name: 'Bob Smith',
6-
email: 'bob@smith.com',
7-
phone: '+1 (321) 123-4567',
8-
company: 'Acme Inc',
9-
department: 'Engineering',
10-
title: 'Senior Software Engineer'
5+
name: 'Don Draper',
6+
email: 'don.draper@scdp.com',
7+
phone: '+1 (212) 555-0112',
8+
company: 'Sterling Cooper Draper Pryce',
9+
department: 'Marketing',
10+
title: 'Creative Director'
1111
};
1212

13-
function user (user = DEFAULT_USER, action) {
13+
function user(user = DEFAULT_USER, action) {
1414
switch (action.type) {
1515
case UPDATE_USER:
16-
return Object.assign(
17-
{},
18-
user,
19-
action.change
20-
);
16+
return Object.assign({}, user, action.change);
2117
default:
2218
return user;
2319
}
2420
}
2521

2622
export default user;
27-

0 commit comments

Comments
 (0)