redux dispatchしてもstateが更新できない

Question

前提・実現したいこと

react+redux+typescriptで簡単なアプリをつくっています
reduxを使い始めたばかりなので様々なサイトを参考に試しましたがinputで得た値をstateに取り込むことができません
エラーメッセージは出ませんが初期値から変化がありません

該当のソースコード

type IApp ={
  email:string,
  password:string,
  count:number,
  changeEmail: (email: string) => void,
  changePassword: (password:string)=> void
}&RouteComponentProps;


class App extends React.Component<IApp, {}> {
  


  

  handleEmailChange(e: React.FormEvent<HTMLInputElement>) {
    e.preventDefault();
    this.props.changeEmail(
       e.currentTarget.value)
    )
  };

  handlePassChange(e: React.FormEvent<HTMLInputElement>) {
    e.preventDefault();
    this.props.changePassword(
       e.currentTarget.value
    )
  };

  handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    this.props.history.push('/signin')
   };

  render() {
    return(
      <div>
              <h1>サインイン</h1>
                <form onSubmit={e=>this.handleSubmit(e)} >
                    <input onChange={
                      e=>this.handleEmailChange(e)}/>
                    <input onChange={e=>this.handlePassChange(e)} />
                        <button type="submit" >

                        ログイン

                        </button>
                </form>

      </div>
    )
  };
}
export type MainState = ReturnType<typeof store.getState>;

const mapStateToProps = (state: MainState) => {
  return {
    email: state.email,
    password:state.password,
    
  };
};
type ActionType = {
  type: string,
  payload: string | number
};

const mapDispatchToProps = (dispatch: ThunkDispatch<IApp,undefined,ActionType>): IDispatchToProps => {
  return {
    changeEmail: (email: string) => {
      dispatch(changeEmail(email));
    },
    changePassword: (password: string) => {
      dispatch(changePassword(password));
    },
  };
};


export default withRouter(connect(mapStateToProps, mapDispatchToProps
)(App));

//reducer
const initCountState: ICountState = {
  count: 0 ,
  email:"",
  password:"",
}
export  const loginReducer=(
  state:ICountState=initCountState,
   action:LoginAction)=> {
  switch (action.type) {
    case 'changeEmail':
      return (
        Object.assign({}, state, {email: action.payload.email})
      );
    case 'changePassword':
      return (
        Object.assign({}, state, {password: action.payload.password})
      );
    default:
      return state;
  }
}
const createRootReducer = (history) =>
  combineReducers({
    login:loginReducer,
    countState:countReducer,
    router: connectRouter(history),

  });
export default createRootReducer;

export const changeEmail = (text) => {
  return {
    type: 'changeEmail',
    payload: text
  };
};
 
export const changePassword = (text) => {
  return {
    type: 'changePassword',
    payload: text
  };
};

export type LoginAction = IEmailAction | IPasswordAction;
export interface IEmailAction extends Action {
  type: 'changeEmail';
  payload: {
    email: string;
  };
  
}
export interface IPasswordAction extends Action {
  type: 'changePassword';
  payload: {
    password: string;
  };
  
}

formをsubmitしても{email:'',password:'',count:0}の初期値のままになります

関係ありそうな部分だけ抜粋しました
エラーは出ないためimportなどのミスではないと思います

Answer 1

まずはどこまで値を渡せているか console.log({対象のオブジェクト});などで確認しましょう。

1. handleEmailChange(e: React.FormEvent<HTMLInputElement>) での e.target.value
2. mapDispatchToProps の changeEmail(email: string) の email
3. loginReducer の case 'changeEmail' の action.payload.email
4. Object.assign({}, state, {email: action.payload.email}) の戻り値

最初の方で躓いていたとしたら、一つずつ解決する必要がある（複数の問題を孕んでいる）可能性があるためです。

(追記)

上記4でundefinedになるということで、参照のオブジェクトに対してObject.assignをしようとしているため上手く動いていないものと思われます。
参考：深い複製についての注意
lodash.jsを使って、下記のようにディープコピーしたオブジェクトを使って書いてみてください。

+ import * as _ from 'lodash';

export  const loginReducer=(
  state:ICountState=initCountState,
   action:LoginAction)=> {
  switch (action.type) {
+   const newState:ICountState = _.cloneDeep(state);
    case 'changeEmail':
+      newState.email = action.payload.email;
+      return newState;
-      return (
-        Object.assign({}, state, {email: action.payload.email})
-      );
    case 'changePassword':
+      newState.password = action.payload.password;
+      return newState;
-      return (
-        Object.assign({}, state, {password: action.payload.password})
-      );
    default:
+      return newState;
-      return state;
  }
}

Comments

[luuuuuuuna]

アドバイスありがとうございます！
試してみたところ３のaction.payload.emailまではできていましたが
４の戻り値でundefinedになっていました

[guissy-k]

ご確認ありがとうございます！
回答に追記しますのでstateをDeepCopyしたオブジェクトを使ってReducerを実装してみてください。
参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Deep_Clone

[luuuuuuuna]

うまくいきました！
ありがとうございます！

[guissy-k]

それは良かったです！