Стоит ли использовать state, или все таки всегда хранить в redux store?

В своих приложениях с react + redux вы используете state? Некоторые люди мне говорят что надо все данные хранить в redux store и state вообще не пользоваться.
Я думаю что все данные в store ето то же что и использование глобальных переменных.
Интересно мнение других разработчиков. Какие подходы и архитектуру вы используете с react?
  • Вопрос задан
  • 3457 просмотров
Решения вопроса 1
AMar4enko
@AMar4enko
Как только начнете делать серверный рендер - поймете, зачем нужен redux
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 5
mmmaaak
@mmmaaak
Много не кодил на редаксе, но видел в различных скринкастах, что стейт внутри компонентов используется чисто для управления UI внутри конкретного компонента, например флаги скрыть/показать для каких-либо блоков, или значения полей ввода, которые обновляются при событии change и испольуются в компоненте где-нибудь еще, не влияя на стейт приложения в store
Ответ написан
Комментировать
bitver
@bitver
off: Есть субъективное ощущение, что Redux сделали люди, которые были не в курсе существования state у компонентов.

Вообще где-то можно найти, что редьюсеры советуют использовать state там, где какой-то части компонента все равно на состояние приложения и она живет своей жизнью.
На вскидку сложно привести достойный пример, но что пришло в голову: "компонент пошагового заполнения формы, где не критична пошаговость для данных, а компонент лишь UI/UIX прибамбас".
Ответ написан
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
State можно и нужно использовать. Об этом не раз говорил создатель библиотеки Redux.

Согласен с Pavel Shvedov по поводу того в каких случаях. Абсолютно нет никакой необходимости тот же onChange в поле инпута выносить в redux store и диспатчить изменения на каждый чих, если вы, например, делаете валидацию поля. Пусть у вас будет форма, у нее есть кнопка submit, для нее, например, простейшее правило: все три поля формы должны быть не пустыми. Надо ли это выносить в store? Зачем? Используете state, смотрите: если поля не пустые - убираете атрибут disabled у кнопки submit. Смотрите === реакт сам смотрит, в зависимости от переменной в state, так как на изменения state происходит ре-рендер компонента.

Пример:

...
constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
    }
    this.onSubmit = this.onSubmit.bind(this)
    this.onInputChange = this.onInputChange.bind(this)
  }
  onSubmit(e) {
    e.preventDefault()
    const { email, password } = this.state
    this.props.onSubmit(email, password)
  }
  onInputChange(e) {
    this.setState({ [e.target.id]: e.target.value })
  }
  validate() {
    if (this.state.email && this.state.password) {
      return true
    }
  }
...


далее в методе render компонента:

render() {
    const { email, password } = this.state
    return (
      <div className='row'>
        <div className='centered w300'>
          <form onSubmit={this.onSubmit}>
            ...
            <button type='submit' className='btn btn-success' disabled={!this.validate()}>
              Submit
            </button>
          </form>
        </div>
      </div>
    )
  }


Если не требуется большего, то зачем при этом использовать store ? На случай для какой-то более сложной валидации, можно использовать onBlur события и их уже диспатчить (вдруг вы введеный ник проверяете на "занят/не занят").
Ответ написан
@MorozoW
Если упростить до безобразия, логика использования store/state следующая:
  • Store описывает глобальное состояние приложения
  • State описывает локальное состояние компонентов
Ответ написан
Комментировать
@beh
Разработчик python, javascript
Возможно вам не нужен redux, статья Дэна Абрамова (создатель redux).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы