Why is this.props.username undefined in React-Redux? - reactjs

Question

When I try to access this.props.username in:
loginClick = (event) => {
event.preventDefault();
console.log('Login submit click, props.username: ' + this.props.username);
this.props.loginDispatch(this.props.username);
}
I get undefined.
Can you tell me what I'm missing?
Reducer:
import { fromJS } from 'immutable';
import { DEFAULT_ACTION, SET_USERNAME } from './constants';
const initialStateMutable = {
username: ''
};
const initialState = fromJS(initialStateMutable);
function loginReducer(state = initialState, action) {
switch (action.type) {
case DEFAULT_ACTION:
return state;
case SET_USERNAME:
console.log('reducer state.username value: ' + state.username);
return {
...state,
username: action.username
};
default:
return state;
}
}
Action:
import { LOGIN_SUBMIT, SET_USERNAME } from './constants';
export const loginDispatch = (name) => ({
type: LOGIN_SUBMIT,
name,
});
export const setUsername = (username) => {
return {
type: SET_USERNAME,
username,
};
};
Selector:
import { createSelector } from 'reselect';
const selectLoginPageDomain = () => (state) => state.get('loginPage');
const makeSelectLoginPage = () => createSelector(
selectLoginPageDomain(),
(substate) => substate.toJS()
);
export default makeSelectLoginPage;
export {
selectLoginPageDomain,
};
index.tsx:
import makeSelectLoginPage from './selector';
import * as React from 'react';
import { loginDispatch, setUsername } from './actions';
import { connect } from 'react-redux';
interface ILoginProps {
loginDispatch: Function;
setUsername: Function;
username: string;
}
interface ILoginState {
}
class LoginPage extends React.Component<ILoginProps, ILoginState> {
constructor(props, context) {
super(props, context);
}
updateInputValue = (event) => {
event.preventDefault();
console.log('Current value of props.username: ' + this.props.username);
this.props.setUsername(event.target.value);
}
loginClick = (event) => {
event.preventDefault();
console.log('Login submit click, props.username: ' + this.props.username);
this.props.loginDispatch(this.props.username);
}
render() {
return (
<div>
<div className="row">
<div className="col-xs-12">
<div className="card">
<div className="card-inside">
<div className="alignc">
<form onSubmit={this.loginClick} className="row">
<div>
<div className="alignl">
Enter username for calculation history.
</div>
<div>
<input type="text" value={this.props.username} onChange={this.updateInputValue}/>
</div>
<button type="submit" value="Submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => ({
...state,
username: state.username,
...makeSelectLoginPage()(state),
});
const mapDispatchToProps = (dispatch) => ({
dispatch,
setUsername: (value: string) => dispatch(setUsername(value)),
loginDispatch: (name: string) => dispatch(loginDispatch(name)),
});
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
UPDATE:
I just realized I'm getting this error from the selector:
Uncaught TypeError: substate.toJS is not a function
at eval (eval at ./app/containers/Login/selector.ts

Answer 1

state is an immutable variable. Try this :
const mapStateToProps = (state) => ({
...state.toJS(),
username: state.get('username'),
...makeSelectLoginPage()(state),
});