Question

我知道Redux通常应该具有功能性的无状态组件。但是，我有一个很好的react statefull组件，并尝试重新设计它以与Redux一起使用。为什么？我不想在此组件正常工作时使用存储来处理该组件逻辑的每一部分；除了我想保留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;

是否可以将状态组件状态分派到Redux存储

1 个答案: