Read store outside react context.

[FanManutd]

Hello. I want to know the opinion of the community about one case.

Documentation recommends using react context, here is an example from there:

import {observer} from 'mobx-react-lite'
import {createContext, useContext} from "react"

const TimerContext = createContext<Timer>()

const TimerView = observer(() => {
    // Grab the timer from the context.
    const timer = useContext(TimerContext) // See the Timer definition above.
    return (
        <span>Seconds passed: {timer.secondsPassed}</span>
    )
})

ReactDOM.render(
    <TimerContext.Provider value={new Timer()}>
        <TimerView />
    </TimerContext.Provider>,
    document.body
)

But what if I needed to read the store outside of the react component? Would it be ok to put an instance of the class to global variable and pass it to the context? And also access this variable outside of the react component:

// import this variable somewhere else
export const store = new Timer()

ReactDOM.render(
    <TimerContext.Provider value={store}>
        <TimerView />
    </TimerContext.Provider>,
    document.body
)

Real life example: remove authorization token from storage in axios interceptor. Pseudocode:

import { store } from 'index';

axios.interceptors.response.use(
  () => {},
  async () => {
    try {
      // try refresh token
      await get('/refresh');
    } catch () {
      // if error, clear auth token
      store.clearToken();
    }
  }
);

[mweststrate]

That is fine, MobX is agnostic to React. Only complication is that global singletons can easily trip up unit tests, but if you mock out axios / make sure the store is reinitialized for every test you should be fine.

…

On Mon, Jun 26, 2023 at 9:52 AM Misha Yakubchuk ***@***.***> wrote: Hello. I want to know the opinion of the community about one case. Documentation recommends using react context, here is an example from there: import {observer} from 'mobx-react-lite' import {createContext, useContext} from "react" const TimerContext = createContext<Timer>() const TimerView = observer(() => { // Grab the timer from the context. const timer = useContext(TimerContext) // See the Timer definition above. return ( <span>Seconds passed: {timer.secondsPassed}</span> ) }) ReactDOM.render( <TimerContext.Provider value={new Timer()}> <TimerView /> </TimerContext.Provider>, document.body ) But what if I needed to read the store outside of the react component? Would it be ok to put an instance of the class to global variable and pass it to the context? And also access this variable outside of the react component: // import this variable somewhere else export const store = new Timer() ReactDOM.render( <TimerContext.Provider value={store}> <TimerView /> </TimerContext.Provider>, document.body ) Real life example: remove authorization token from storage in axios interceptor. Pseudocode: import { store } from 'index'; axios.interceptors.response.use( () => {}, async () => { try { // try refresh token await get('/refresh'); } catch () { // if error, clear auth token store.clearToken(); } } ); — Reply to this email directly, view it on GitHub <#3711>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDWRCH3XBWQ6756HP3XNE5SDANCNFSM6AAAAAAZTYVW2I> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[FanManutd]

Thanks)

[kubk]

I'd add that if you switch to a singleton, you won't need React context anymore. Since you'll be able to import the store from any module, there is no point in additionally passing it into React context. But keep in mind that singleton behavior might differ from what you expect in SSR. In Node.js, all requests to the server will share the same instance of the global store. In this case, you'll get bugs, for example, when after logging in one user, you get all users authenticated. In this case, React context comes in handy.

[FanManutd]

I suppose if there are tests in the code, the context will greatly simplify the testing of components.