質問編集履歴

なぜか文章が途中で抜けていたので再度書き直しました。

2019/10/09 17:50

投稿

southernX

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,11 +20,13 @@
 ![イメージ説明](8ed0635ce1811801109482256b40e1ea.png)
+Countは今のところh1要素をレンダリングしているだけです。
 ### 発生している問題・エラーメッセージ
-サインインページのログインボタンを押すと問題なく/countのurlに変わるのですが表示されるコンポーネントは変わりません。しかしブラウザで再読み込みすればCountコンポーネントが表示されます
+サインインページのログインボタンを押すと問題なく/countのurlに変わるのですが、表示されるコンポーネントが変わりません。しかしブラウザで再読み込みすればCountコンポーネントが表示されます
@@ -124,6 +126,156 @@
 ```
+Appコンポーネントはurlが/signinの時にSigninコンポーネントを、/countの時にCountコンポーネントをレンダリングします。
+```Signintsx
+import * as React from 'react';
+import { connect } from 'react-redux'
+import { logInIfFetchUser } from '../modules/ActionCreater'
+import { AppState } from '../modules/Reducers'
+type SignInProps = {
+  logInIfFetchUser: any
+}
+class SignIn extends React.Component<SignInProps> {
+  render(){
+    let email: any
+    let password: any
+    return(
+      <div>
+        <h1>サインイン</h1>
+        <form onSubmit={(e) => {
+          e.preventDefault()
+          console.log(`searching user with email: ${email.value}, password: ${password.value}`)
+          this.props.logInIfFetchUser(email.value, password.value)
+        }}>
+          <input type='text' ref={node => email = node}/>
+          <input type='password' ref={node => password = node}/>
+          <button type='submit'>ログイン</button>
+        </form>
+      </div>
+    )
+  }
+}
+const mapStateToProps = (state: AppState) => {
+}
+export default connect(mapStateToProps,{ logInIfFetchUser })(SignIn)
+```
+SignInコンポーネントです。
+onSubmitした時のアクションが以下の通りです。
+```ActionCreatorts
+import axios from 'axios'
+import { Action } from 'redux'
+import { ThunkAction } from "redux-thunk"
+import { push } from 'connected-react-router'
+import { LOGIN } from './ActionTypes'
+import { AppState } from './Reducers'
+export function logIn(userName: string) {
+  return {
+    type: 'LOGIN' as typeof LOGIN,
+    name: userName
+  }
+}
+export const logInIfFetchUser = (
+  email: string,
+  password: string
+): ThunkAction<void, AppState, null, Action<string>> => async dispatch => {
+  axios.get(`http://localhost:8080/api/?email=${email}&password=${password}`)
+    .then((response) => {
+      dispatch(logIn(response.data[0].name))
+      dispatch(push('/count'))
+    })
+}
+```
+SignInで入力されたアドレスとパスワードと一致するユーザーをapiサーバーから返します。
+その後、/countに移動します。
+リクエストは成功し、ユーザーが返ってきたことは確認しました。
@@ -134,12 +286,144 @@
+connect()(SignIn)をさらにwithRouter()でラップしてみました。
-ここに問題に対して試したことを記載してください。
+connect()の引数を以下のように変えてみました。
+```
+export default connect(mapStateToProps, { logInIfFetchUser }, null, {
+  pure: false
+})(SignIn)
+```
-### 補足情報（FW/ツールのバージョンなど）
+## その他のファイル(ReducerやStoreなど)
+```Reducerts
+import { Action, LOGIN } from './ActionTypes'
+import { Reducer, combineReducers } from 'redux'
+import { History } from 'history'
+import { connectRouter } from 'connected-react-router'
+type userReducerState = {
+  name: string
+}
+const initialState = {
+  name: ''
+}
+export const userReducer: Reducer<userReducerState, Action> = (state = initialState, action) => {
-ここにより詳細な情報を記載してください。
+  switch(action.type) {
+    case LOGIN:
+      return {
+        name: action.name
+      }
+    default:
+      return state;
+  }
+}
+export type userReducer = typeof userReducer
+export const rootReducer = (history: History) => combineReducers({
+  router: connectRouter(history),
+  userReducer
+})
+export type AppState = ReturnType<typeof rootReducer>
+```
+```Storets
+import { createStore } from 'redux'
+import { applyMiddleware } from "redux";
+import thunk from 'redux-thunk';
+import { createBrowserHistory } from 'history'
+import { routerMiddleware } from 'connected-react-router'
+import { rootReducer } from "./Reducers";
+export const history = createBrowserHistory()
+export const store = createStore(
+  rootReducer(history),
+  applyMiddleware(
+    routerMiddleware(history),
+    thunk
+  )
+)
+```
+```ActionCreator
+import { logIn } from './ActionCreater'
+export const LOGIN = 'LOGIN'
+export type Action = ReturnType<typeof logIn>
+```
+userReducerはまだ使っていません。後にユーザー名を取り出すつもりです。