Задать вопрос

supfiger

Ответы пользователя по тегу MobX

  • Как правильно работать с mobx?

    @supfiger
    Ответ 1:

    1. Импортируешь Provider в файл index.js, чтобы не пробрасывать props через каждый дочерний компонент:
      import { Provider } from "mobx-react";
    2. В файле index.js оборачиваешь компонент рендеринга в Provider:
      ReactDOM.render(<Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));
    3. Импортируешь inject в нужный компонент, где нужно использовать тебе store:
      import { inject } from "mobx-react";
    4. Если классовый компонент, можешь повесить @inject("store") перед объявлением класса, где значение в скобках — название твоего пропса, который ты передаешь в Provider в index.js: 
      import React, { Component } from 'react';
import { inject } from "mobx-react";

@inject("store")
class Form extends Component {
  render() {
    return (
      <form className="form">
        <select>
          <option></option>
        </select>
      </form>
    );
  }
}

export default Form;
    5. Если компонент функциональный, то можно сделать так: 
      import React from "react";
import { inject } from "mobx-react";

const App = () => {
  return <div className="App">Hello World!</div>;
};

export default inject("store")(App);


    Ответ 2:
    1. Теперь доступ к store есть из любого компонента, который находится в дереве Provider и на котором повешен @inject("store").
      Чтобы вызвать метод из стора, следуй примеру ниже. Допустим, вызовем метод по нажатию кнопки: 
      <button onClick={() => this.props.store.getUsers()}></button>
      И, насколько я понимаю, нужно обернуть вызываемую функцию в стрелочную функцию, то есть: () =>, если нужный метод находится за пределами текущего файла. В твоем случае — да.

      Можешь еще сделать деструктуризацию, и обращаться сразу к нужному методу: 
      const { getUsers } = this.props.store;
  // какой-то код

  return <button onClick={() => getUsers()}></button>;
};



    Ответ написан
    Комментировать
    Комментировать