React и Redux: Использование состояния или ссылок? - PullRequest
Новая
       46

React и Redux: Использование состояния или ссылок?

0 голосов
/ 25 июня 2018

Я сейчас учу себя самому 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 в комментариях здесь - аналогичное сообщение о stackoverflow. Я все еще не уверен, потому что первый ответ говорит, что ссылки плохие по причинам, а второй говорит, что разработчики React говорят, что ссылки хороши для получения значений из dom (что я и делаю!).

1 Ответ

0 голосов
/ 25 июня 2018

Спасибо за помощь.Похоже, что большинство сообщества выступает за использование штата.

Я также спросил Дана Абрамова, который сказал, что он предпочел бы рефери в этом случае.Вы можете увидеть его ответ здесь .

Спасибо всем за ваш вклад и советы!:)

...