Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 571c182

Browse files
committed
use redux and react-redux
1 parent 7e19e78 commit 571c182

File tree

9 files changed

+109
-46
lines changed

9 files changed

+109
-46
lines changed

‎src/components/Account/index.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
2+
import { connect } from 'react-redux';
3+
import { compose } from 'recompose';
34

45
import { PasswordForgetForm } from '../PasswordForget';
56
import PasswordChangeForm from '../PasswordChange';
67
import withAuthorization from '../Session/withAuthorization';
78

8-
const AccountPage = (props,{ authUser }) =>
9+
const AccountPage = ({ authUser }) =>
910
<div>
1011
<h1>Account: {authUser.email}</h1>
1112
<PasswordForgetForm />
1213
<PasswordChangeForm />
1314
</div>
1415

15-
AccountPage.contextTypes={
16-
authUser: PropTypes.object,
17-
};
16+
constmapStateToProps=(state)=>({
17+
authUser: state.sessionState.authUser,
18+
});
1819

19-
export default withAuthorization(true)(AccountPage);
20+
export default compose(
21+
withAuthorization(true),
22+
connect(mapStateToProps)
23+
)(AccountPage);

‎src/components/Home/index.js‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
import { compose } from 'recompose';
24

35
import withAuthorization from '../Session/withAuthorization';
46
import { db } from '../../firebase';
@@ -9,27 +11,23 @@ const fromObjectToList = (object) =>
911
: [];
1012

1113
class HomePage extends Component {
12-
constructor(props) {
13-
super(props);
14-
15-
this.state = {
16-
users: []
17-
};
18-
}
19-
2014
componentDidMount() {
15+
const { onSetUsers } = this.props;
16+
2117
db.onceGetUsers().then(snapshot =>
22-
this.setState(()=>({users: fromObjectToList(snapshot.val())}))
18+
onSetUsers(fromObjectToList(snapshot.val()))
2319
);
2420
}
2521

2622
render() {
23+
const { users } = this.props;
24+
2725
return (
2826
<div>
2927
<h1>Home</h1>
3028
<p>The Home Page is accessible by every signed in user.</p>
3129

32-
{ !!this.state.users.length && <UserList users={this.state.users} /> }
30+
{ !!users.length && <UserList users={users} /> }
3331
</div>
3432
);
3533
}
@@ -43,4 +41,15 @@ const UserList = ({ users }) =>
4341
)}
4442
</div>
4543

46-
export default withAuthorization(true)(HomePage);
44+
const mapStateToProps = (state) => ({
45+
users: state.userState.users,
46+
});
47+
48+
const mapDispatchToProps = (dispatch) => ({
49+
onSetUsers: (users) => dispatch({ type: 'USERS_SET', users }),
50+
});
51+
52+
export default compose(
53+
withAuthorization(true),
54+
connect(mapStateToProps, mapDispatchToProps)
55+
)(HomePage);

‎src/components/Navigation/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
32
import { Link } from 'react-router-dom';
3+
import { connect } from 'react-redux';
44

55
import SignOutButton from '../SignOut';
66

7-
const Navigation = (props,{ authUser }) =>
7+
const Navigation = ({ authUser }) =>
88
<div>
99
{ authUser
1010
? <NavigationAuth />
1111
: <NavigationNonAuth />
1212
}
1313
</div>
1414

15-
Navigation.contextTypes = {
16-
authUser: PropTypes.object,
17-
};
18-
1915
const NavigationAuth = () =>
2016
<ul>
2117
<li><Link to="/">Landing</Link></li>
@@ -30,4 +26,8 @@ const NavigationNonAuth = () =>
3026
<li><Link to="/signin">Sign In</Link></li>
3127
</ul>
3228

33-
export default Navigation;
29+
const mapStateToProps = (state) => ({
30+
authUser: state.sessionState.authUser,
31+
});
32+
33+
export default connect(mapStateToProps)(Navigation);
Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,17 @@
11
import React from 'react';
2-
import PropTypesfrom 'prop-types';
2+
import {connect}from 'react-redux';
33

44
import { firebase } from '../../firebase';
55

66
const withAuthentication = (Component) => {
77
class WithAuthentication extends React.Component {
8-
constructor(props) {
9-
super(props);
10-
11-
this.state = {
12-
authUser: null,
13-
};
14-
}
15-
16-
getChildContext() {
17-
return {
18-
authUser: this.state.authUser,
19-
};
20-
}
21-
228
componentDidMount() {
9+
const { onSetAuthUser } = this.props;
10+
2311
firebase.auth.onAuthStateChanged(authUser => {
2412
authUser
25-
? this.setState(()=>({authUser}))
26-
: this.setState(()=>({authUser: null}));
13+
? onSetAuthUser(authUser)
14+
: onSetAuthUser(null);
2715
});
2816
}
2917

@@ -34,11 +22,11 @@ const withAuthentication = (Component) => {
3422
}
3523
}
3624

37-
WithAuthentication.childContextTypes={
38-
authUser: PropTypes.object,
39-
};
25+
constmapDispatchToProps=(dispatch)=>({
26+
onSetAuthUser: (authUser)=>dispatch({type: 'AUTH_USER_SET', authUser }),
27+
});
4028

41-
return WithAuthentication;
29+
return connect(null,mapDispatchToProps)(WithAuthentication);
4230
}
4331

4432
export default withAuthentication;

‎src/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import { Provider } from 'react-redux';
34
import './index.css';
45
import App from './components/App';
6+
import store from './store';
57
import registerServiceWorker from './registerServiceWorker';
68

7-
ReactDOM.render(<App />, document.getElementById('root'));
9+
ReactDOM.render(
10+
<Provider store={store}>
11+
<App />
12+
</Provider>,
13+
document.getElementById('root')
14+
);
15+
816
registerServiceWorker();

‎src/reducers/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { combineReducers } from 'redux';
2+
import sessionReducer from './session';
3+
import userReducer from './user';
4+
5+
const rootReducer = combineReducers({
6+
sessionState: sessionReducer,
7+
userState: userReducer,
8+
});
9+
10+
export default rootReducer;

‎src/reducers/session.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const INITIAL_STATE = {
2+
authUser: null,
3+
};
4+
5+
const applySetAuthUser = (state, action) => ({
6+
...state,
7+
authUser: action.authUser
8+
});
9+
10+
function sessionReducer(state = INITIAL_STATE, action) {
11+
switch(action.type) {
12+
case 'AUTH_USER_SET' : {
13+
return applySetAuthUser(state, action);
14+
}
15+
default : return state;
16+
}
17+
}
18+
19+
export default sessionReducer;

‎src/reducers/user.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const INITIAL_STATE = {
2+
users: [],
3+
};
4+
5+
const applySetUsers = (state, action) => ({
6+
...state,
7+
users: action.users
8+
});
9+
10+
function userReducer(state = INITIAL_STATE, action) {
11+
switch(action.type) {
12+
case 'USERS_SET' : {
13+
return applySetUsers(state, action);
14+
}
15+
default : return state;
16+
}
17+
}
18+
19+
export default userReducer;

‎src/store/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createStore } from 'redux';
2+
import rootReducer from '../reducers';
3+
4+
const store = createStore(rootReducer);
5+
6+
export default store;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /