Is that possible to dispatch stateful component state to redux store - reactjs

Question

I know that one should generally have functional stateless components in Redux. However, I have quite a nice react statefull component and try to redesign it to work with Redux. Why? I do not want to use store to handle every bit of this componet logic while this component does its job fine; besides I'd like to keep lifycle methods. The problem I have is that do not see way to dispatch state of this component.
class LoginX extends React.Component {
constructor(props) {
super(props);
this.state = { login: '', password: '' };
}
handleChange = (e) => {
this.setState({
[e.currentTarget.name]: e.currentTarget.value,
});
}
render(){...}
}
That is simplified class, I removed 90% to keep it readable.
const mapStateToProps = (state) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
onClick: (e) => {e.preventDefault(); console.log('dispatch'); dispatch({
type: 'LOGIN_SUBMIT',
payload: {
token: {...LoginX.state}
}
})}
}};
let Login = connect(mapStateToProps, mapDispatchToProps)(LoginX);
export default Login;
That is rest of code. You see, I have written token: {...LoginX.state} to indicate what I wanna have rather. Yes, I know that Redux components should be functional, but maybe there is workaround for case like mine?

Answer 1

It's not wrong per se to define React components as classes. If the React version you are using does not support hooks and you are using features that only classes provide (state and component lifecycles) you are fine defining your components as classes.
If you want to dispatch an action with some data that is present in your component, you should provide the data from the component itself when calling the action creator.
In your case, I would do something like:
class LoginX extends React.Component {
constructor(props) {
super(props);
this.state = { login: '', password: '' };
}
handleChange = (e) => {
this.setState({
[e.currentTarget.name]: e.currentTarget.value,
});
}
onClick = (e) => {
const { login, password } = this.state;
e.preventDefault();
this.props.onSubmit({ login, password });
}
render() {
...
<button onClick={this.onClick}>submit</button>
}
}
const mapStateToProps = (state) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
onSubmit: (credentials) => {
console.log('dispatch');
dispatch({
type: 'LOGIN_SUBMIT',
payload: {
token: credentials
}
})
}
}
};
let Login = connect(mapStateToProps, mapDispatchToProps)(LoginX);
export default Login;