Вычислить значение mobx из действия

Question

В настоящее время я занимаюсь рефакторингом репо FreeCodeCamp как способа изучения mobx. Я пытаюсь вычислить this.store.studentCount, как вы можете видеть в компоненте StudentModal. Посмотрите здесь:

Это мой /client/src/components/students/Modal.js

@observer
@inject('StudentModal')
export default class StudentModal extends Component {

  store = new this.props.StudentModal()

  renderStudentCount() {
    let message
    if (this.store.studentCount > 1) {
      message = `${this.store.studentCount} students`
    } else {
      message = `${this.store.studentCount} student`
    }
    return <div id="student-count">{message}</div>
  }

  render() {
    return (
      <div className="AddStudentForm">
        <div className="class-table-button-container">
          <Button
            onClick={this.open}
          >
            Add Student
          </Button>
          {this.renderStudentCount()}
        </div>
        .....
    )
  }
}

Взглянув на мои модели для модального компонента, вы можете увидеть, что мне нужно выбрать службу, чтобы узнать ее длину, но по какой-то причине я не могу установить studentCount на новое значение.

Это мой /client/src/models/students/Modal.js

import { observable, action } from 'mobx'
import StudentsService from '../../services/StudentsService'

export default class StudentModal {    
  @observable open = true

  @observable studentCount = 0

  @action
  fetchStudents() {
    StudentsService.fetchStudents().then(response => {
      const studentCount = response.body
      this.studentCount = studentCount.length
    })
  }
}

Вы можете посмотреть полный исходный код здесь: https://github.com/imcodingideas/classroom-mode/tree/mobx-migration, и я должен напомнить вам, что это открытый код.

Я правильно это делаю? Есть ли у вас какие-либо отзывы для меня?

Answer 1

Кажется, есть некоторые мелочи:

Идентичные имена классов

Это может привести к проблемам, так как ваш магазин и компонент реагирования называются StudentModal

заказ декоратора

, как @Joseph предложил поменять порядок вокруг вашего класса:

@inject("StudentModal")
@observer
export default class StudentModal

Государственное управление

 store = new this.props.StudentModal()

При создании каждого StudentModal вы, похоже, создаете новое хранилище состояний. Обычно хранилище создается один раз (если вы не хотите, чтобы отдельные хранилища были модальными) внутри вашей точки входа, а затем используется позже:

import { render } from "react-dom";
import { Provider } from "mobx-react";
var stores = { StudentModal: new StudanModalStore() }
render(
        <Provider {...stores}>
            <StudentModal />
        </Provider>,
    rootEl,
);

@observer
@inject('StudentModal')
export default class StudentModal extends Component {
    //used getter instead of setting once
    // no longer use `new` but directly reference instance of the store. 
    get store (): StudentModalStore { return this.props.StudentModalas; }

}

код выше приведен в машинописи.