Question

我已经使用了react和redux了几周，我想知道如何将相同的Component与mapDispatchToProps的不同实现一起使用。我正在寻找最佳实践。

所以说我有一个像这样的表单组件：

import React from 'react';
import PropTypes from 'prop-types';

class SimpleForm extends React.Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    label: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.props.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor={this.props.label}>
          {`${this.props.label} :`}
          <input
            id={this.props.label}
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

我想将此组件连接到商店中的操作。

我可以轻松地做到这一点：

const mapDispatchToProps = dispatch => ({
    handleSubmit: event => dispatch(handleSubmit(event)),
});

export default connect(null, mapDispatchToProps)(SimpleForm);

所以我知道如何将特定操作连接到我的组件。

我的问题是将这个组件与其他redux动作一起重用的最佳实践是什么。这意味着我将能够使用SimpleForm并将其连接到特定操作之前。

多谢。

Answer 1

有两种方法可以想到。首先是您在mapDispatchToProps中为所有用例提前定义所有动作创建者。这是较简单的方法，但可能对您有更大的限制。

想到的第二种方法是使用传递给ownProps的{{1}}参数。

类似这样的东西。

mapDispathToProps

import * as allActions from "./file"; const mapDispatchToProps = (dispatch, ownProps) => ({ 'ownProps.functionName': () => dispatch(allActions[ownProps.functionName]), });是您在使用此组件时实际传递的内容。

与ownProps一样

这似乎有些笨拙和令人费解，但是如果您需要这样做，我认为它可以工作。

如何将相同的类与不同的mapDispatchToProps结合使用-最佳实践

1 个答案: