在redux中使用重构

Question

我有一个使用react和redux开发的组件.现在我想使用重构,我不明白有组织的方式将它与redux一起使用.通过有组织的方式,我的意思是说以前我用过的有两个功能一样mapStateToProps,并mapDispatchToProps和它们被包裹在connect HOC这使得代码看起来更具可读性和清洁在我看来.我的问题是我如何做同样的方式,就像我为redux部分做的那样？我找不到这种方式,所以我不确定是否有办法,如果有人可以通过分享帮助我,好吗？

这是我的代码

import React from 'react';
import { connect } from 'react-redux';

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

const mapDispatchToProps = dispatch => ({
  login: user => dispatch(login(user)),
});

class Login extends React.Component<{ login: Function }> {
  state = {
    error: false,
    user: {
      email: '',
      password: '',
    },
  };

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({ user: { ...this.state.user, [name]: value } });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.login(this.state.user);
  };

  renderError() {
    if (this.state.error) {
      return (
        <ErrorMessage>
          The following email is not associated with us. Please create an
          account to use our service
        </ErrorMessage>
      );
    }
    return <div />;
  }
  render() {
    const { user } = this.state;
    return (
      <WhitePart>
        <UpperPart>
          <TitleContainer>
            <TitleText>Login</TitleText>
          </TitleContainer>
          {this.renderError()}
          <Form>
            <form onSubmit={this.handleSubmit}>
              <StyledField
                label="Email"
                id="email"
                name="email"
                type="text"
                value={user.email}
                placeholder="Email"
                className="input-field"
                component={GTextField}
                onChange={this.handleChange}
                style={{
                  marginBottom: '20px',
                }}
                required
                fullWidth
              />
              <StyledField
                label="Password"
                id="password"
                name="password"
                type="password"
                value={user.password}
                placeholder="Password"
                className="input-field"
                component={GPasswordField}
                onChange={this.handleChange}
                required
                fullWidth
              />
              <ButtonContainer>
                <PrimaryButton
                  type="submit"
                  style={{
                    textTransform: 'none',
                    fontFamily: 'Lato',
                    fontWeight: 300,
                  }}
                >
                  Login
                </PrimaryButton>
              </ButtonContainer>
            </form>
          </Form>
        </UpperPart>
      </WhitePart>
    );
  }
}

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

for handleChange和handleSubmit我可以使用withHandler和withState但是对于mapStateToProps和mapDispatchToProps我不熟悉.

Answer 1

直接回答你的问题:

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  withStateHandlers,
  withHandler,
)(Login);

奖金!

mapDispatchToProps使用时不需要单独使用recompose.我们喜欢withHandlers对所有处理程序使用Recompose ,包括Redux调度.

看起来像这样.

import React from 'react';
import { connect } from 'react-redux';
import { signUpUser, loginUser } from './someActionsFile';

const LandingScreen = props => (
  <ButtonContainer>
    <Button title="Sign Up" onPress={props.dispatchSignUpUser} />
    <Button title="Log In" onPress={props.dispatchLoginUser} />
    <Button title="Say Hi!!" onPress={props.sayHi} />
  </ButtonContainer>
);

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

const myHandlers = withHandlers({
  dispatchSignUpUser: ({ dispatch }) => () => {
    dispatch(signUpUser());
  },
  dispatchLoginUser: ({ dispatch }) => () => {
    dispatch(loginUser());
  },
  sayHi: () => () => {
    console.log('Hi!!');
  }
});

export default compose(
  connect(mapStateToProps), // Once connect() is composed `dispatch` is prop.
  myHandlers
)(LandingScreen);