是否可以将有状态的组件状态分派到 redux 存储

Question

我知道在 Redux 中通常应该有功能性的无状态组件。但是，我有一个相当不错的 react statefull 组件，并尝试重新设计它以与 Redux 一起使用。为什么？我不想使用 store 来处理这个组件逻辑的每一点，而这个组件可以正常工作；除了我想保留 lifycle 方法。我遇到的问题是看不到调度此组件状态的方法。

 class LoginX extends React.Component {
      constructor(props) {
        super(props);
        this.state = { login: '', password: '' };      
      }
handleChange = (e) => {
    this.setState({
      [e.currentTarget.name]: e.currentTarget.value,
    });
  }
render(){...}
}

这是简化的类，我删除了 90% 以保持可读性。

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;

这是其余的代码。你看，我写了token: {...LoginX.state} 来表明我想要什么。是的，我知道 Redux 组件应该可以正常工作，但也许有像我这样的情况的解决方法？

Answer 1

将 React 组件定义为类本身并没有错。如果您使用的 React 版本不支持 hooks 并且您正在使用只有类提供的功能（state 和组件生命周期），您可以将组件定义为类。

如果您想使用组件中存在的某些数据来调度操作，则应在调用操作创建者时提供来自组件本身的数据。

在你的情况下，我会这样做：

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;