Question

我使用react-redux eslint规则获得更好的代码语法。规则之一称为“ react-redux / prefer-separate-component-file”。链接到规则：https://github.com/DianaSuvorova/eslint-plugin-react-redux/blob/HEAD/docs/rules/prefer-separate-component-file.md 我已经尝试过将逻辑分开并将其放在单独的文件中，但是没有成功。该组件只是无法连接。

我有一个Login组件，其中包含登录部分的逻辑：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import LoginMarkup from './LoginMarkup';
import NavigationService from '../../../services/NavigationService';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cellphone: {
        value: '',
      },
      password: {
        value: '',
      },
    };
  }

  componentDidMount() {

  }

  static navigationOptions = {
    header: null,
  };


  register = () => {
    const route = 'Register';
    NavigationService.navigate(route);
  }

  updateInputState = (key, value) => {
    console.warn('value er ', value);
    this.setState((prevState) => ({
      [key]: {
        ...prevState[key],
        value,
        //  valid: validate(value, prevState.controls[key].validationRules, connectedValue).isValid,
        //  touched:  true
      },
    }));
  }

  login = () => {
    // Log The User In
    this.props.login(this.state.cellphone.value, this.state.password.value);
  }

  render() {
    console.log('PROPS ER', this.props);
    return (
        <LoginMarkup
          register={this.register}
          login={this.login}
          updateInputState={this.updateInputState}
          cellphone={this.state.cellphone}
          password={this.state.password}
        />
    );
  }
}

Login.propTypes = {
  login: PropTypes.func.isRequired,
};

export default Login;

这是我单独的StoreConnect文件：

import { connect } from 'react-redux';
import Login from './Login';
import login from '../../../redux/actions/authentication';

const mapStateToProps = (state) => ({
  isLoading: state.ui.isLoading,
});

const mapDispatchToProps = (dispatch) => ({
  login: (cellphone, password) => dispatch(login(cellphone + password)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

顺便说一句，将这个确切的代码放入Login组件本身即可使其正常工作。因此，我的商店设置正确。任何帮助表示赞赏。

用于将组件从组件本身连接到Redux存储的逻辑

0 个答案: