mapStateToPropsが上手くいかない【TypeScript&connected-react-router&thunk】

Question

前提・実現したいこと

SignInコンポーネントにstateをpropsとして渡す。

該当のソースコード

SignInコンポーネント↓

import * as React from 'react';
import { connect } from 'react-redux'
import { logInIfFetchUser } from '../modules/ActionCreater'
import { AppState } from '../modules/Reducers'


type SignInProps = {
  logInIfFetchUser: any
  user: any
}
class SignIn extends React.Component<SignInProps> {
  render(){
    let email: any
    let password: any

    return(
      <div>
        <h1>サインイン</h1>
        <p>{this.props.user}</p>
        <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) => {
  user: state.userReducer
}

export default connect(mapStateToProps,{ logInIfFetchUser })(SignIn)

Reducer↓

import * as React from 'react';
import { connect } from 'react-redux'
import { logInIfFetchUser } from '../modules/ActionCreater'
import { AppState } from '../modules/Reducers'


type SignInProps = {
  logInIfFetchUser: any
  user: any
}
class SignIn extends React.Component<SignInProps> {
  render(){
    let email: any
    let password: any

    return(
      <div>
        <h1>サインイン</h1>
        <p>{this.props.user}</p>
        <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) => {
  user: state.userReducer
}

export default connect(mapStateToProps,{ logInIfFetchUser })(SignIn)

Action↓

import * as React from 'react';
import { connect } from 'react-redux'
import { logInIfFetchUser } from '../modules/ActionCreater'
import { AppState } from '../modules/Reducers'


type SignInProps = {
  logInIfFetchUser: any
  user: any
}
class SignIn extends React.Component<SignInProps> {
  render(){
    let email: any
    let password: any

    return(
      <div>
        <h1>サインイン</h1>
        <p>{this.props.user}</p>
        <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) => {
  user: state.userReducer
}

export default connect(mapStateToProps,{ logInIfFetchUser })(SignIn)

Store↓

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
  )
)

発生している問題・エラーメッセージ

mapStateToPropsの引数state（store）には確かにuserReducerが入っています。
エディターで確認できました。

しかしuserReducerにカーソルを当ててみるとstateにはuserReducerが無いらしいのです

こちらはコンソールの結果です。mapStateToPropsはundifinedになってしまいました。

【追記】　Storeの構造、型を調べるためconsole.log(store.getState())をindex.jsで実行したところ、コンソールの結果は次のようになりました。

確かにReducerは入っていて、それはmapStateToPropsでstate.userReducer.***として取り出せるはずと考えているのですが。

Answer 1

こんにちは

SignInコンポーネントをredux に connect させるときに渡している mapStateToProps が

修正前：

const mapStateToProps = (state: AppState) => {
  user: state.userReducer
}

となっていますが、以下のように { ･･･ } を丸カッコで囲んでみるといかがでしょうか？

修正後：

const mapStateToProps = (state: AppState) => ({
  user: state.userReducer
})

※参考： MDN アロー関数 - 構文　からの引用：

// object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
params => ({foo: bar})

Comments

[southernX]

丸括弧をつける事で解決しました。回答ありがとうございます！奇遇にも、自分でも別作業をしている時に「あそこ丸括弧をつけたらどうかな」と考えていました笑。

[jun68ykt]

どういたしまして。解決されたとのことで、よかったです????

Answer 2

キャプチャの１枚目で表示されている

state: Reducer<{
  router: RouterState;
  userReducer: userReducerState;
}, AnyAction>

は型定義の情報なので、この時点ではオブジェクトが実際にあるかどうか確認できていません。(AppStateの情報も同様）
createStoreする時に渡しているreducerは、 combineReducers をしたものですか？
参考： combineReducersでハマったメモ

Comments

[southernX]

はい、rootReducerはconnectRouterとuserReducerをcombineReducers()したものです。stateの型ですがtype AppState = ReturnType<typeof rootReducer>として実際に返した値の型なのでAppState型の引数stateには確かにuserReducerがあるはずなのです。Storeのファイルも載せておきます