Ответы пользователя по тегу 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>;
      };



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