Access store outside components

[HungDang2911]

I want to use axios interceptors to handle request, so I need to find a way to access store without using hooks (because it's forbidden outside components).
For example, the request headers should include access token saved in mobx store, and when response code is 401, it should call log out action.
Thank you.

[mweststrate]

There is nothing special about accessing mobx stores outside React, as MobX isn't relying on React to work. For more help please describe why you can't/ wouldn't be able to access the mobx store?

[HungDang2911]

There is nothing special about accessing mobx stores outside React, as MobX isn't relying on React to work. For more help please describe why you can't/ wouldn't be able to access the mobx store?

Thanks for your reply.
Inside React Native components, I can use useStores() to access store but doing the same way in axios interceptor callback function will cause error (like cannot using hooks outside components).
Currently I'm using MST.

[mweststrate]

If you are calling axios from react, just grab the store in the component, and access it through the closure. Otherwise you could import the store directly. For more help please do include some example code.

…

On Mon, Dec 7, 2020 at 9:40 AM HungDang2911 ***@***.***> wrote: There is nothing special about accessing mobx stores outside React, as MobX isn't relying on React to work. For more help please describe why you can't/ wouldn't be able to access the mobx store? Thanks for your reply. Inside React Native components, I can use useStores() to access store but doing the same way in axios interceptor callback function will cause error (like cannot using hooks outside components). Currently I'm using MST. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2671 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFLCSC4LFQOGSI5R33STSPH5ANCNFSM4UQEX7EQ> .

[HungDang2911]

Here is my code

//UserStore.ts

import { Instance, types, flow, applySnapshot } from "mobx-state-tree"
import { login, register } from "../services/api/authAPI"
import { withEnvironment } from "./extensions/with-environment"

export const defaults = {
  _id: "",
  username: "",
  accessToken: "",
  refreshToken: "",
}

export const UserStoreModel = types
  .model()
  .props({
    _id: types.string,
    username: types.string,
    accessToken: types.string,
    refreshToken: types.string,
  })
  .extend(withEnvironment)
  .actions((self) => ({
    login: flow(function* (account) {
      const { accessToken, refreshToken } = (yield login(account)).data
      console.tron.log(accessToken, refreshToken)
      self.accessToken = accessToken
      self.refreshToken = refreshToken
    }),
    register: flow(function* (account) {
      yield register(account)
    }),
    signOut: function () {
      applySnapshot(self, defaults)
    },
  }))

export const createUserStoreModel = () => types.optional(UserStoreModel, defaults as any)

export type UserStore = Instance<typeof UserStoreModel>

//RootStore.ts
`import { Instance, SnapshotOut, types } from "mobx-state-tree"
import { createUserStoreModel } from "../UserStore"

// prettier-ignore
export const RootStoreModel = types.model("RootStore").props({
  userStore: createUserStoreModel()
})

export interface RootStore extends Instance<typeof RootStoreModel> {}
export interface RootStoreSnapshot extends SnapshotOut<typeof RootStoreModel> {}

//api.ts
`import axios from "axios"
import * as Config from "./apiConfig"

axios.interceptors.request.use(
  (config) => {
    // Request headers
    config.headers["Content-Type"] = "application/json"
    return config
  },
  (error) => {
    return Promise.reject(error)
  },
)`

[danielkcz]

Obviously, if you need to access a store outside of React, it's either about passing it through function calls from React OR by making it singleton that can imported.

Either way, this is way out of scope of MobX. Please learn basics of JavaScript programming somewhere else, we are not general helpdesk.

[mweststrate]

I think the simples solution is to set up your axios interceptor in the afterCreate hook the RootStoreModel rather then globally. Alternatively you could make a global variable that stores a ref to a RootStoreModelInstance and assign it in the afterCreate, and read that in your axios interceptor.