質問編集履歴
1
なぜか文章が途中で抜けていたので再度書き直しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,9 +9,10 @@
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
Countは今のところh1要素をレンダリングしているだけです。
|
|
12
13
|
### 発生している問題・エラーメッセージ
|
|
13
14
|
|
|
14
|
-
サインインページのログインボタンを押すと問題なく/countのurlに変わるのですが表示されるコンポーネント
|
|
15
|
+
サインインページのログインボタンを押すと問題なく/countのurlに変わるのですが、表示されるコンポーネントが変わりません。しかしブラウザで再読み込みすればCountコンポーネントが表示されます
|
|
15
16
|
|
|
16
17
|
|
|
17
18
|
```indexjs
|
|
@@ -61,13 +62,154 @@
|
|
|
61
62
|
|
|
62
63
|
export default App
|
|
63
64
|
```
|
|
65
|
+
Appコンポーネントはurlが/signinの時にSigninコンポーネントを、/countの時にCountコンポーネントをレンダリングします。
|
|
64
66
|
|
|
67
|
+
```Signintsx
|
|
68
|
+
import * as React from 'react';
|
|
69
|
+
import { connect } from 'react-redux'
|
|
70
|
+
import { logInIfFetchUser } from '../modules/ActionCreater'
|
|
71
|
+
import { AppState } from '../modules/Reducers'
|
|
65
72
|
|
|
66
73
|
|
|
74
|
+
type SignInProps = {
|
|
75
|
+
logInIfFetchUser: any
|
|
76
|
+
}
|
|
77
|
+
class SignIn extends React.Component<SignInProps> {
|
|
78
|
+
render(){
|
|
79
|
+
let email: any
|
|
80
|
+
let password: any
|
|
81
|
+
|
|
82
|
+
return(
|
|
83
|
+
<div>
|
|
84
|
+
<h1>サインイン</h1>
|
|
85
|
+
<form onSubmit={(e) => {
|
|
86
|
+
e.preventDefault()
|
|
87
|
+
console.log(`searching user with email: ${email.value}, password: ${password.value}`)
|
|
88
|
+
this.props.logInIfFetchUser(email.value, password.value)
|
|
89
|
+
}}>
|
|
90
|
+
<input type='text' ref={node => email = node}/>
|
|
91
|
+
<input type='password' ref={node => password = node}/>
|
|
92
|
+
<button type='submit'>ログイン</button>
|
|
93
|
+
</form>
|
|
94
|
+
</div>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const mapStateToProps = (state: AppState) => {
|
|
100
|
+
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export default connect(mapStateToProps,{ logInIfFetchUser })(SignIn)
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
SignInコンポーネントです。
|
|
107
|
+
onSubmitした時のアクションが以下の通りです。
|
|
108
|
+
|
|
109
|
+
```ActionCreatorts
|
|
110
|
+
import axios from 'axios'
|
|
111
|
+
import { Action } from 'redux'
|
|
112
|
+
import { ThunkAction } from "redux-thunk"
|
|
113
|
+
import { push } from 'connected-react-router'
|
|
114
|
+
import { LOGIN } from './ActionTypes'
|
|
115
|
+
import { AppState } from './Reducers'
|
|
116
|
+
|
|
117
|
+
export function logIn(userName: string) {
|
|
118
|
+
return {
|
|
119
|
+
type: 'LOGIN' as typeof LOGIN,
|
|
120
|
+
name: userName
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
export const logInIfFetchUser = (
|
|
126
|
+
email: string,
|
|
127
|
+
password: string
|
|
128
|
+
): ThunkAction<void, AppState, null, Action<string>> => async dispatch => {
|
|
129
|
+
axios.get(`http://localhost:8080/api/?email=${email}&password=${password}`)
|
|
130
|
+
.then((response) => {
|
|
131
|
+
dispatch(logIn(response.data[0].name))
|
|
132
|
+
dispatch(push('/count'))
|
|
133
|
+
})
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
```
|
|
137
|
+
SignInで入力されたアドレスとパスワードと一致するユーザーをapiサーバーから返します。
|
|
138
|
+
その後、/countに移動します。
|
|
139
|
+
リクエストは成功し、ユーザーが返ってきたことは確認しました。
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
67
143
|
### 試したこと
|
|
68
144
|
|
|
69
|
-
|
|
145
|
+
connect()(SignIn)をさらにwithRouter()でラップしてみました。
|
|
70
146
|
|
|
71
|
-
|
|
147
|
+
connect()の引数を以下のように変えてみました。
|
|
148
|
+
```
|
|
149
|
+
export default connect(mapStateToProps, { logInIfFetchUser }, null, {
|
|
150
|
+
pure: false
|
|
151
|
+
})(SignIn)
|
|
152
|
+
```
|
|
72
153
|
|
|
154
|
+
## その他のファイル(ReducerやStoreなど)
|
|
155
|
+
```Reducerts
|
|
156
|
+
import { Action, LOGIN } from './ActionTypes'
|
|
157
|
+
import { Reducer, combineReducers } from 'redux'
|
|
158
|
+
import { History } from 'history'
|
|
159
|
+
import { connectRouter } from 'connected-react-router'
|
|
160
|
+
|
|
161
|
+
type userReducerState = {
|
|
162
|
+
name: string
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
const initialState = {
|
|
166
|
+
name: ''
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
export const userReducer: Reducer<userReducerState, Action> = (state = initialState, action) => {
|
|
73
|
-
|
|
170
|
+
switch(action.type) {
|
|
171
|
+
case LOGIN:
|
|
172
|
+
return {
|
|
173
|
+
name: action.name
|
|
174
|
+
}
|
|
175
|
+
default:
|
|
176
|
+
return state;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
export type userReducer = typeof userReducer
|
|
181
|
+
|
|
182
|
+
export const rootReducer = (history: History) => combineReducers({
|
|
183
|
+
router: connectRouter(history),
|
|
184
|
+
userReducer
|
|
185
|
+
})
|
|
186
|
+
|
|
187
|
+
export type AppState = ReturnType<typeof rootReducer>
|
|
188
|
+
|
|
189
|
+
```
|
|
190
|
+
```Storets
|
|
191
|
+
import { createStore } from 'redux'
|
|
192
|
+
import { applyMiddleware } from "redux";
|
|
193
|
+
import thunk from 'redux-thunk';
|
|
194
|
+
import { createBrowserHistory } from 'history'
|
|
195
|
+
import { routerMiddleware } from 'connected-react-router'
|
|
196
|
+
import { rootReducer } from "./Reducers";
|
|
197
|
+
|
|
198
|
+
export const history = createBrowserHistory()
|
|
199
|
+
|
|
200
|
+
export const store = createStore(
|
|
201
|
+
rootReducer(history),
|
|
202
|
+
applyMiddleware(
|
|
203
|
+
routerMiddleware(history),
|
|
204
|
+
thunk
|
|
205
|
+
)
|
|
206
|
+
)
|
|
207
|
+
|
|
208
|
+
```
|
|
209
|
+
```ActionCreator
|
|
210
|
+
import { logIn } from './ActionCreater'
|
|
211
|
+
|
|
212
|
+
export const LOGIN = 'LOGIN'
|
|
213
|
+
export type Action = ReturnType<typeof logIn>
|
|
214
|
+
```
|
|
215
|
+
userReducerはまだ使っていません。後にユーザー名を取り出すつもりです。
|