CODEWITHSUNDEEP
javascriptreactjsmobxmobx-react
TEMP
TEMP

Reputation: 235

How to track mobx global store changes in componentDidUpdate

I am playing around with react + mobx + mobx-react library. I have created mobx store to store the app settings(appSettingsStore). My react app has 2 components namelyAppHeader & AppBody. The AppHeader has dropdown and onChange value is store in mobx store. In my AppBody component, I call API to get data in componentDidMount. The AppBody component is wrapped around the router where different page have different API calls as value changes in AppHeader dropdown.

I would like to call API in the AppBody component every time I change the selection in my dropdown. Is there any way I can track the change in my mobx store appSettingsStore in componentDidUpdate?

I have created codesandbox for reference - https://codesandbox.io/s/gracious-flower-vu1js?file=/src/App.tsx

App.tsx

export default function App() {
  return (
    <React.Fragment>
      <AppHeader />
      <Router>
        <Switch>
          <Route to="/" component={AppBody} exact />
        </Switch>
      </Router>
    </React.Fragment>
  );
}

AppSettingsStore.ts (Mobx store for storing global app settings)

import { observable, action } from "mobx";

export class AppSettingsStore {
  @observable
  settings = "";

  get getAppSettings() {
    return this.settings;
  }

  @action
  setAppSettings(settings: string) {
    this.settings = settings;
  }
}

export const appSettingsStore = new AppSettingsStore();

Header.tsx

@observer
export class AppHeader extends Component {
  render() {
    return (
      <div>
        My React App header component
        <select
          onChange={e => appSettingsStore.setAppSettings(e.target.value)}
          style={{ width: 200, float: "right" }}
          value={appSettingsStore.getAppSettings}
        >
          <option value="" />
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
        </select>
      </div>
    );
  }
}

Body.tsx

@observer
export class AppBody extends Component {
  async componentDidMount() {
    // API calls
  }

  async componentDidUpdate() {
    // Check if mobx store value is different
    // from previous then call API otherwise ignore
    console.log(appSettingsStore.getAppSettings);
    // API calls
  }

  render() {
    return <div style={{ padding: "5rem" }}>This is App body component</div>;
  }
}

I would appreciate the help.

Upvotes: 0

Views: 2357

Answers (1)

IT&#39;s Bruise
IT&#39;s Bruise

Reputation: 834

You have to use reaction for listening settings, like the next updated (sandbox)

import { reaction, ... } from 'mobx';

@observer
export class AppBody extends Component {
  constructor(props) {
    super(props);

    this.reactions = []; // it needs to dispose reaction on unmount
  }

  async componentDidMount() {
    // API calls

    this.reactions = [
      reaction(
        () => appSettingsStore.settings,
        this.handleSettingsUpdates
      )
    ]
  }

  componentWillUnmount() {
    this.reactions.forEach((dispose) => dispose());
  }

  handleSettingsUpdates = (newSettings) => {
    console.log('newSettings = ', newSettings);
  }

  render() {
    return <div style={{ padding: "5rem" }}>This is App body component</div>;
  }
}

Upvotes: 1

Related Questions