Movatterモバイル変換

[0]ホーム
URL:

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

Commitf3aabde

Browse files
committed
update redux-ts version and refactor code
1 parent21ade1d commitf3aabde

File tree

13 files changed

+96
-211
lines changed

13 files changed

+96
-211
lines changed

‎docs/app.js‎

Lines changed: 6 additions & 5 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"react-router-redux":"^5.0.0-alpha.9",
1616
"react-tap-event-plugin":"^3.0.2",
1717
"redux":"^4.0.0",
18-
"redux-ts":"^3.0.0"
18+
"redux-ts":"^4.0.0"
1919
},
2020
"devDependencies": {
2121
"@types/material-ui":"^0.20.8",

‎src/actions/auth.actions.ts‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import{SyncAction}from'redux-ts'
1+
import{createAction}from'redux-ts'
22

3-
exportclassLoginextendsSyncAction{
4-
constructor(publicusername:string,publicpassword:string){
5-
super()
6-
}
3+
interfaceLoginPayload{
4+
username:string
5+
password:string
76
}
87

9-
exportclassLogoutextendsSyncAction{}
10-
11-
exportclassSetTokenextendsSyncAction{
12-
statickey='auth'
13-
constructor(publictoken?:string){
14-
super()
15-
}
16-
getTokenKey(){
17-
returnSetToken.key
18-
}
8+
interfaceSetTokenPayload{
9+
token?:string
1910
}
11+
12+
exportconstLogin=createAction<LoginPayload>('Login')
13+
14+
exportconstLogout=createAction('Logout')
15+
16+
exportconstSetToken=createAction<SetTokenPayload>('SetToken')

‎src/actions/layout.actions.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import{SyncAction}from'redux-ts'
1+
import{createAction}from'redux-ts'
22

3+
exportconstChangeTheme=createAction('ChangeTheme')
34

4-
exportclassChangeThemeextendsSyncAction{}
5-
exportclassShowLoadingextendsSyncAction{}
6-
exportclassHideLoadingextendsSyncAction{}
5+
exportconstShowLoading=createAction('ShowLoading')
6+
7+
exportconstHideLoading=createAction('HideLoading')

‎src/components/topBar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import {
2020
}from'material-ui/Toolbar'
2121

2222
exportinterfaceTopBarProps{
23-
toggleTheme:()=>any
24-
logout:()=>any
23+
ChangeTheme:()=>void
24+
Logout:()=>void
2525
useDarkTheme:boolean
2626
}
2727

@@ -91,14 +91,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
9191

9292
constthemeToggle=(
9393
<Toggle
94-
onToggle={this.props.toggleTheme}
94+
onToggle={this.props.ChangeTheme}
9595
label={'dark:'+this.props.useDarkTheme}
9696
toggled={this.props.useDarkTheme}
9797
/>
9898
)
9999

100100
constlogoutButton=(
101-
<FlatButtononClick={this.props.logout}label="logout"/>
101+
<FlatButtononClick={this.props.Logout}label="logout"/>
102102
)
103103

104104
constappBarRightElement=(

‎src/containers/Layout.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
44
importCircularProgressfrom'material-ui/CircularProgress'
55

66
import{theme}from'../components/theme'
7-
import{connect}from'../utils/redux.helpers'
7+
import{mapStoreToProps}from'../utils/redux.helpers'
8+
import{connect}from'react-redux'
89

910
constinnerLoaderContainer={
1011
position:'absolute',
@@ -25,10 +26,12 @@ const loaderOverlay = {
2526
opacity:0.2,
2627
}asReact.CSSProperties
2728

28-
interfaceLayoutProps{
29-
useDarkTheme:boolean
30-
showLoading:boolean
31-
}
29+
conststoreProps=mapStoreToProps(store=>({
30+
useDarkTheme:!!store.layout.useDarkTheme,
31+
showLoading:store.layout.asyncCount>0,
32+
}))
33+
34+
typeLayoutProps=ReturnType<typeofstoreProps>
3235

3336
constLayoutContainer:React.SFC<LayoutProps>=({
3437
showLoading,
@@ -50,7 +53,4 @@ const LayoutContainer: React.SFC<LayoutProps> = ({
5053
</div>
5154
)
5255

53-
exportdefaultconnect(store=>({
54-
useDarkTheme:!!store.layout.useDarkTheme,
55-
showLoading:store.layout.asyncCount>0,
56-
}))(LayoutContainer)
56+
exportdefaultconnect(storeProps)(LayoutContainer)

‎src/containers/Login.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,27 @@ import TextField from 'material-ui/TextField'
55
importRaisedButtonfrom'material-ui/RaisedButton'
66

77
import{Login}from'../actions/auth.actions'
8-
import{connect}from'../utils/redux.helpers'
8+
import{connect}from'react-redux'
9+
import{mapDispatchToProps}from'redux-ts'
910

10-
interfaceLoginProps{
11-
login:(username:string,password:string)=>any
12-
}
11+
constdispatchProps=mapDispatchToProps({
12+
Login,
13+
})
14+
15+
typeLoginProps=ReturnType<typeofdispatchProps>
1316

14-
classLoginContainerextendsReact.Component<LoginProps,any>{
17+
classLoginContainerextendsReact.Component<LoginProps>{
1518
refs!:{
1619
[key:string]:React.ReactInstance
1720
username:TextField
1821
password:TextField
1922
}
2023

2124
login=()=>{
22-
varusername=this.refs.username.getValue()
23-
varpassword=this.refs.password.getValue()
24-
25-
this.props.login(username,password)
25+
this.props.Login({
26+
username:this.refs.username.getValue(),
27+
password:this.refs.password.getValue(),
28+
})
2629
}
2730

2831
render(){
@@ -59,7 +62,4 @@ class LoginContainer extends React.Component<LoginProps, any> {
5962
}
6063
}
6164

62-
exportdefaultconnect(null,dispatch=>({
63-
login:(username:string,password:string)=>
64-
dispatch(newLogin(username,password)),
65-
}))(LoginContainer)
65+
exportdefaultconnect(null,dispatchProps)(LoginContainer)

‎src/containers/Main.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,29 @@ import * as React from 'react'
22

33
import{ChangeTheme}from'../actions/layout.actions'
44
import{Logout}from'../actions/auth.actions'
5-
import{push}from'react-router-redux'
65

76
import{TopBar,TopBarProps}from'../components/topBar'
8-
import{connect}from'../utils/redux.helpers'
7+
import{mapStoreToProps}from'../utils/redux.helpers'
8+
import{connect}from'react-redux'
9+
import{mapDispatchToProps}from'redux-ts'
910

10-
constMainContainer:React.SFC<TopBarProps>=({ children, ...rest})=>(
11+
conststoreProps=mapStoreToProps(store=>({
12+
useDarkTheme:!!store.layout.useDarkTheme,
13+
}))
14+
15+
constdispatchProps=mapDispatchToProps({
16+
Logout,
17+
ChangeTheme,
18+
})
19+
20+
typeMainProps=ReturnType<typeofdispatchProps>&
21+
ReturnType<typeofstoreProps>
22+
23+
constMainContainer:React.SFC<MainProps>=({ children, ...rest})=>(
1124
<div>
1225
<TopBar{...rest}/>
1326
{children}
1427
</div>
1528
)
1629

17-
exportconstMain=connect(
18-
store=>({
19-
useDarkTheme:!!store.layout.useDarkTheme,
20-
}),
21-
dispatch=>({
22-
logout:()=>dispatch(newLogout()),
23-
toggleTheme:()=>dispatch(newChangeTheme()),
24-
}),
25-
)(MainContainer)
30+
exportconstMain=connect(storeProps,dispatchProps)(MainContainer)

‎src/reducers/auth.reducer.ts‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,49 @@ import { Login, SetToken, Logout } from '../actions/auth.actions'
44
import{ShowLoading,HideLoading}from'../actions/layout.actions'
55
import{AuthState}from'../models/store.model'
66

7+
consttokenKey='auth'
8+
79
exportconstauth=newReducerBuilder<AuthState>()
810

911
.init({
10-
token:localStorage.getItem(SetToken.key)||undefined,
12+
token:localStorage.getItem(tokenKey)||undefined,
1113
})
1214

1315
.handle(Login,(state,action,dispatch)=>{
14-
dispatch(newShowLoading())
16+
dispatch(ShowLoading())
1517
newPromise(resolve=>{
1618
setTimeout(resolve,1000)// simulate http request
1719
})
1820
.then(()=>{
19-
dispatch(newSetToken(action.username+'|'+action.password))
21+
dispatch(
22+
SetToken({
23+
token:action.payload.username+'|'+action.payload.password,
24+
}),
25+
)
2026
dispatch(push('/'))
21-
dispatch(newHideLoading())
27+
dispatch(HideLoading())
2228
})
2329
.catch(()=>{
24-
dispatch(newHideLoading())
30+
dispatch(HideLoading())
2531
})
2632

2733
returnstate
2834
})
2935

3036
.handle(Logout,(state,action,dispatch)=>{
31-
dispatch(newSetToken(undefined))
37+
dispatch(SetToken({token:undefined}))
3238
dispatch(push('/'))
3339

3440
returnstate
3541
})
3642

3743
.handle(SetToken,(state,action)=>{
38-
consttoken=action.token
39-
constkey=action.getTokenKey()
44+
consttoken=action.payload.token
4045

4146
if(token!=null){
42-
localStorage.setItem(key,token)
47+
localStorage.setItem(tokenKey,token)
4348
}else{
44-
localStorage.removeItem(key)
49+
localStorage.removeItem(tokenKey)
4550
}
4651

4752
return{

‎src/utils/redux.helpers.ts‎

Lines changed: 2 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,4 @@
1-
import{
2-
connectasinnerConnect,
3-
MapStateToPropsParam,
4-
MapDispatchToPropsParam,
5-
MergeProps,
6-
Options,
7-
InferableComponentEnhancer,
8-
DispatchProp,
9-
InferableComponentEnhancerWithProps,
10-
}from'react-redux'
111
import{StoreState}from'../models/store.model'
2+
import{ActionCreatorDefinition,StateToProps}from'redux-ts'
123

13-
exportinterfaceConnect<TStore>{
14-
():InferableComponentEnhancer<DispatchProp>
15-
16-
<TStateProps={},no_dispatch={},TOwnProps={},State=TStore>(
17-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
18-
):InferableComponentEnhancerWithProps<
19-
TStateProps&DispatchProp&TOwnProps,
20-
TOwnProps
21-
>
22-
23-
<no_state={},TDispatchProps={},TOwnProps={}>(
24-
mapStateToProps:null|undefined,
25-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
26-
):InferableComponentEnhancerWithProps<TDispatchProps&TOwnProps,TOwnProps>
27-
28-
<TStateProps={},TDispatchProps={},TOwnProps={},State=TStore>(
29-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
30-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
31-
):InferableComponentEnhancerWithProps<
32-
TStateProps&TDispatchProps&TOwnProps,
33-
TOwnProps
34-
>
35-
36-
<
37-
TStateProps={},
38-
no_dispatch={},
39-
TOwnProps={},
40-
TMergedProps={},
41-
State=TStore
42-
>(
43-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
44-
mapDispatchToProps:null|undefined,
45-
mergeProps:MergeProps<TStateProps,undefined,TOwnProps,TMergedProps>,
46-
):InferableComponentEnhancerWithProps<TMergedProps,TOwnProps>
47-
48-
<no_state={},TDispatchProps={},TOwnProps={},TMergedProps={}>(
49-
mapStateToProps:null|undefined,
50-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
51-
mergeProps:MergeProps<undefined,TDispatchProps,TOwnProps,TMergedProps>,
52-
):InferableComponentEnhancerWithProps<TMergedProps,TOwnProps>
53-
54-
<no_state={},no_dispatch={},TOwnProps={},TMergedProps={}>(
55-
mapStateToProps:null|undefined,
56-
mapDispatchToProps:null|undefined,
57-
mergeProps:MergeProps<undefined,undefined,TOwnProps,TMergedProps>,
58-
):InferableComponentEnhancerWithProps<TMergedProps,TOwnProps>
59-
60-
<
61-
TStateProps={},
62-
TDispatchProps={},
63-
TOwnProps={},
64-
TMergedProps={},
65-
State=TStore
66-
>(
67-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
68-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
69-
mergeProps:MergeProps<
70-
TStateProps,
71-
TDispatchProps,
72-
TOwnProps,
73-
TMergedProps
74-
>,
75-
):InferableComponentEnhancerWithProps<TMergedProps,TOwnProps>
76-
77-
<TStateProps={},no_dispatch={},TOwnProps={},State=TStore>(
78-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
79-
mapDispatchToProps:null|undefined,
80-
mergeProps:null|undefined,
81-
options:Options<State,TStateProps,TOwnProps>,
82-
):InferableComponentEnhancerWithProps<DispatchProp&TStateProps,TOwnProps>
83-
84-
<TStateProps={},TDispatchProps={},TOwnProps={}>(
85-
mapStateToProps:null|undefined,
86-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
87-
mergeProps:null|undefined,
88-
options:Options<{},TStateProps,TOwnProps>,
89-
):InferableComponentEnhancerWithProps<TDispatchProps,TOwnProps>
90-
91-
<TStateProps={},TDispatchProps={},TOwnProps={},State=TStore>(
92-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
93-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
94-
mergeProps:null|undefined,
95-
options:Options<State,TStateProps,TOwnProps>,
96-
):InferableComponentEnhancerWithProps<
97-
TStateProps&TDispatchProps,
98-
TOwnProps
99-
>
100-
101-
<
102-
TStateProps={},
103-
TDispatchProps={},
104-
TOwnProps={},
105-
TMergedProps={},
106-
State=TStore
107-
>(
108-
mapStateToProps:MapStateToPropsParam<TStateProps,TOwnProps,State>,
109-
mapDispatchToProps:MapDispatchToPropsParam<TDispatchProps,TOwnProps>,
110-
mergeProps:MergeProps<
111-
TStateProps,
112-
TDispatchProps,
113-
TOwnProps,
114-
TMergedProps
115-
>,
116-
options:Options<State,TStateProps,TOwnProps,TMergedProps>,
117-
):InferableComponentEnhancerWithProps<TMergedProps,TOwnProps>
118-
}
119-
120-
exportconstconnect:Connect<StoreState>=innerConnect
4+
exportconstmapStoreToProps:StateToProps<StoreState>=map=>map

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp