Местное состояние MobX против глобального состояния - PullRequest
Новая
       29

Местное состояние MobX против глобального состояния

0 голосов
/ 14 декабря 2018

Я использую React с mobx для обработки состояния приложения.

Я использую компоненты дампа, которые изменяют данные через внешнее хранилище (вызов ajax, фильтр или массив карт и т.д. ...)

Вместо этого в формах, когда вам приходится обрабатывать изменение ввода с помощью события onChange, в настоящее время я использую наблюдаемые и действия внутри самого компонента.

Это плохая практика?Или я должен поместить все действия и наблюдаемые данные во внешнее состояние?

Если вместо этого эта практика приемлема, как я могу обратиться к случаю, когда мне нужно сбросить локальное наблюдаемое состояние (например, ввод текста)в ответ на действие вызова ajax, выполненное во внешнем хранилище?Могу ли я использовать обратный вызов в хранилище действий, чтобы передать управление действию внутри компонента, как в следующем примере: 

import React from 'react';
import { observer, inject } from "mobx-react";
import { observable, action } from "mobx";

@inject("rootStore")
@observer
class ContactForm extends React.Component {

constructor(props) {
  super(props);
  this.externaStore = this.props.rootStore.contactStore
  this.onChangeInput = this.onChangeInput.bind(this)
}

@observable text = ''

@action
onChangeInput(event) {
  this.text = event.target.value
}

@action
resetForm() {
  this.text = ''
}

render() {
 return (
  <form>
    <div className="form-group">
      <label htmlFor="input-text" className="control-label">Text input: 
      </label>
      <input onChange={this.onChangeInput} type="text" value={this.text} id="input-text" name="input-text" className="form-control" />
   </div>

    <button onClick={() => this.externaStore.submitForm(this.text, this.resetForm)} className="btn btn-danger btn-xs" type="button" title="Aggiungi">
      <i className="fa fa-save"></i> Aggiungi
    </button>
   </form>
  )
 }
}

class ExternalStore {

constructor(rootStore) {
  this.rootStore = rootStore
  this.service = rootStore.service
}

@observable textList = []

@action
submitForm(text, cb) {
  this.service.doAjax('POST', '/api/text', JSON.stringify(text)).then(data => {
   this.textList.push(text)
   cb()
  })
 }
}

Есть ли еще один лучший метод для обработки подобных случаев?

1 Ответ

0 голосов
/ 14 декабря 2018

Я думаю, что общий ответ таков: MobX (или Redux в этом отношении) не подходящее место для состояния формы.Это по многим причинам, но в основном из-за проблем производительности, сложности и удобства обслуживания.MobX / Redux предназначен для глобального состояния приложения, тогда как состояние формы намного более локально.

Сообщество движется к библиотекам, таким как Formik, которые позволяют полностью управлять состоянием формы и жизненным циклом локально в пределах компонента.Он также хорошо работает с MobX / Redux, чтобы дополнительно инициализировать значения из глобального состояния.Проверьте это, это очень здорово!

https://github.com/jaredpalmer/formik

...