Question

我正在自学Redux。为此，我创建了一个简单的Todo应用程序。现在，在此应用程序上，我目前正在使用dispatch()将待办事项放入我的商店中。这是关于您的意见的问题。我想避免代码异味。

我发现了实现此目标的两种方法。一个使用state，另一个使用ref。我想知道哪种方法更好？感谢您的任何建议。这两个版本如下。

使用ref的版本一：

import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";

class TodoList extends Component {
  taskRef = React.createRef();
  handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch({
      type: ADD_TODO,
      task: this.taskRef.current.value
    });
    event.currentTarget.reset();
  };
  render() {
    let todos = this.props.todos.map((val, index) => (
      <Todo task={val.task} key={index} />
    ));
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="task">Task </label>
          <input type="text" name="task" id="task" ref={this.taskRef} />
          <button type="submit">Add a Todo!</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

const mapDispatchToProps = state => ({
  todos: state.todos
});

export default connect(mapDispatchToProps)(TodoList);

这是使用state的第二个版本：

import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";

class TodoList extends Component {
  state = {
    task: ""
  };
  handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch({
      type: ADD_TODO,
      task: this.state.task
    });
    event.target.reset();
  };
  handleChange = event => {
    event.persist();
    this.setState((state, props) => ({
      [event.target.name]: event.target.value
    }));
  };
  render() {
    let todos = this.props.todos.map((val, index) => (
      <Todo task={val.task} key={index} />
    ));
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="task">Task </label>
          <input
            type="text"
            name="task"
            id="task"
            onChange={this.handleChange}
          />
          <button type="submit">Add a Todo!</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

const mapDispatchToProps = state => ({
  todos: state.todos
});

export default connect(mapDispatchToProps)(TodoList);

编辑：正如qasimalbaqali在评论中指出的here与stackoverflow类似。我仍然不确定，因为第一个答案说裁判很差劲，而第二个回答说React Devs说裁判很擅长从dom中获取值（这就是我在做的！）。

Answer 1

感谢您的帮助。似乎大多数社区都赞成使用国家。

我还问了丹·阿布拉莫夫（Dan Abramov），他说在这种情况下他更喜欢裁判。您可以看到他的答案here。

谢谢大家的意见和建议！：）

React和Redux：使用状态还是引用？

1 个答案: