How do I use mobx-state-tree in my class components?

[tunm1228]

Question

• I've checked documentation and searched for existing issues
• I tried the spectrum channel

[Ghirigoro]

What problem are you running into using MST with class components. Can you share an example of the issue you're running into. Also this might be a better fit for the Spectrum channel or stack overflow, since its not an issue with MST but a question as to its use.

[tunm1228]

import * as React from 'react';
import { View, ViewStyle, TextStyle, Image, TouchableOpacity } from 'react-native';
import { Screen, Text, Header } from "../../components"
import { color } from "../../theme"

export interface InforProps {
}

export interface InforState {
}

const ROOT: ViewStyle = {
backgroundColor: '#fff',
flex: 1
}

export default class InforComponent extends React.Component<InforProps, InforState> {
constructor(props: InforProps) {
super(props);
this.state = {
};
}

public render() {
    return (
        <Screen style={ROOT} preset="scroll" statusBar='dark-content'>
          
        </Screen>
    );
}

}
yes this is my class created, i want to take out store from mobx but don't know how?

This is the package I use:
"mobx-react": "^6.1.8",
"mobx-react-lite": "^1.4.1",
"mobx-state-tree": "^3.14.1",

[Ghirigoro]

I'm still not sure what your asking but the basic idea is that you would define your store model somewhere:

// store.js
import {types} from "mobx-state-tree";

const Store = types.model("Store", {
  time: types.string // or whatever it is you have in your store
}).actions(self=>({
  setTime(newTime) { self.time= Time; }
}));

export const store = Store.create();

And somewhere else you would have your React component class

// store-view.js
import * as React from 'react';
import { observer } from "mobx-react"
import { store } from "./store"

// You need observer so your component will react to changes in the store
@observer
export class StoreView extends React.Component {
  public render() {
    return (
    <div>
      <h1>LAST BUTTON PRESS TIME: { store.time }</h1>
      <button onClick={()=>store.setTime(date.now().toString())}>PRESS ME</button>
    </div>);
  }
}

[radiosilence]

@tunm1228 In order to avoid imports you should create a context provider with your store, then access the context in your components the normal way:

https://reactjs.org/docs/context.html

[coolsoftwaretyler]

Hey @tunm1228 - looks like it's been a while on this MST issue. Lots of good replies here. Did you find them helpful? If not, I'm happy to chat if this is still a relevant problem.

I'm going to convert this to a discussion, which will close the issue, but give you the option to mark helpful answers.

Thanks!

[coolsoftwaretyler]

Marking @Ghirigoro's answer as correct here since I think that's a pretty clear solution to the original question.