How to access to set redux props to react state? - reactjs

Question

This is my code and I try to set email of user to state and set it with other data:
import React, {Component} from "react";
import PropTypes from "prop-types";
import * as actionCreators from '../../actions/authAction';
import {loadUser, setPass , register} from "../../actions/authAction";
import {connect} from "react-redux";
import { bindActionCreators } from "redux";
import {clearError} from "../../actions/errorAction";
import {toast} from "react-toastify";
import store from "../../store";
class RegisterFinal extends Component {
componentDidMount() {
store.dispatch(loadUser());
}
componentDidUpdate(nextProps) {
if (nextProps.user !== this.props.user) {
this.setState({ email: this.props.user});
}
}
state = {
userName: "",
password: "",
passwordConfirm: "",
email: "",
msg: null
}
static propTypes = {
isAuthenticated: PropTypes.bool,
setPass: PropTypes.bool,
register: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
user : PropTypes.object.isRequired,
};
onSubmit = (e) => {
e.preventDefault();
const {password, userName, email} = this.state
const setPass = {
password, userName, email
}
this.props.setPass(setPass);
const {passwordConfirm} = e.target;
const errors = {};
if (password.value !== passwordConfirm.value) {
errors.passwordMismatch = "Entered passwords do not match.";
console.log(errors)
}
}
onChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
render() {
return (
<div className={"container"}>
<div className={"row row-of-final-register justify-content-center"}>
<div className={"mt-5 register-teacher-inputs-box final-register-teacher-inputs-box"}>
<div className={"final-register-wrapper"}>
<form className={"mt-5"} onSubmit={this.onSubmit}>
<div className={"row"}>
<div className={"col-12"}>
<label
htmlFor={"userName"} className={"text-right username-label"}>
<span>*</span>
</label>
<input type="text" className="form-control w-100" placeholder={"Username"}
name={"userName"}
autoComplete="true"
value={this.userName}
onChange={this.onChange}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</div>
<div className={"row"}>
<div className={"col-12 col-lg-6 mt-3"}>
<label
htmlFor={"password"} className={" text-right"}>
<span>*</span>
</label>
<input type="password" className="form-control " placeholder={"Password"}
name={"password"}
value={this.password}
onChange={this.onChange}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</div>
<div className={"row mt-3 pt-2"}>
<div className={"col-12 final-register-wrapper final-register-btn"}>
<button type={"submit"} className={"final-register-btn"}>Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
)
}
}
function mapStateToProps (state , ownProperties) {
console.log(state.auth.user)
return {
setPass: state.auth.setPass,
isAuthenticated: state.auth.isAuthenticated,
error: state.error,
auth: state.auth,
user : state.auth.user,
}
};
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps
)(RegisterFinal);
When run I have this data in my email state :
But when I try to access email get Error that cannot read property ‘email’ of undefined, I just change email : this.props.user to email : this.props.user.email in componentDidUpdate. I actually need to set redux props to react state. I'm new in redux.
Here share my project : my project

Answer 1

Here is a working example that will async load a user, set the initial value of a textbox with it's value and submit changes:
const { Provider, connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { createSelector } = Reselect;
const initialState = {
user: null,
loading: true, //initially set loading to true
};
//helper for async
const later = (value) =>
new Promise((resolve) =>
setTimeout(() => resolve(value), 2000)
);
//action types
const CHANGE_USER = 'CHANGE_USER';
const CHANGED_USER = 'CHANGED_USER';
const LOAD_USER = 'LOAD_USER';
const LOADED_USER = 'LOADED_USER';
//action creators
const loadUser = () => ({
type: LOAD_USER,
});
const loadedUser = (user) => ({
type: LOADED_USER,
payload: user,
});
const changeUser = () => ({
type: CHANGE_USER,
});
const changedUser = (user) => ({
type: CHANGED_USER,
payload: user,
});
// action thunks
const loadUserThunk = () => (dispatch) => {
dispatch(loadUser());
return later({
email: 'original-email',
}).then((user) => dispatch(loadedUser(user)));
};
const changeUserThunk = (email) => (dispatch) => {
dispatch(changeUser());
return later({
email,
}).then((user) => dispatch(changedUser(user)));
};
const reducer = (state, { type, payload }) => {
if (type === LOAD_USER || type === CHANGE_USER) {
return { ...state, loading: true };
}
if (type === LOADED_USER || type === CHANGED_USER) {
return {
...state,
user: payload,
loading: false,
};
}
return state;
};
//selectors
const selectUser = (state) => state.user;
const selectLoading = (state) => state.loading;
const selectUserEmail = createSelector(
[selectUser],
//want to use user?.email but SO babel is too old
(user) => user && user.email
);
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
({ getState, dispatch }) =>
(next) =>
(
action //simple thunk implementation
) =>
typeof action === 'function'
? action(dispatch, getState)
: next(action)
)
)
);
class App extends React.PureComponent {
state = {
email: '',
initial: true, //only initially set from redux
};
componentDidUpdate() {
if (!this.props.loading && this.state.initial) {
this.setState({
email: this.props.email,
initial: false,
});
}
}
//arrow function so you don't need to bind for "this" context
onSubmit = (e) => {
e.preventDefault();
this.props.dispatch(changeUserThunk(this.state.email));
//reset initial
this.setState({ initial: true });
};
emailChanged = (e) =>
this.setState({ email: e.target.value });
componentDidMount() {
this.props.dispatch(loadUserThunk());
}
render() {
return (
<form onSubmit={this.onSubmit}>
<input
type="text"
onChange={this.emailChanged}
value={this.state.email}
// do not edit when loading
disabled={this.props.loading}
/>
<input type="submit" />
{this.props.loading && 'loading...'}
</form>
);
}
}
//do not use store in your components, connect will provide
// dispatch on this.props when mapDispatchToProps is
// undefined or you can pass an object as mapDispatchToProps
const ConnectedApp = connect((state) => ({
email: selectUserEmail(state), //select state.user.email as props.email
loading: selectLoading(state),
}))(App);
ReactDOM.render(
<Provider store={store}>
<ConnectedApp />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
<div id="root"></div>