How to use depedency inversion principle in stan-js?

[chertik77]

Hey, i have a shared api instance which is located under shared/api which is patched of tokens handling and refresh functionality. However, during to feature sliced design rules, i cannot import entities into shared code. Here is an example:

import axios, { AxiosError } from 'axios'

//This is not correct, cannot import entity from shared
import {
  getSessionStore,
  sessionActions,
  sessionService
} from '@/entities/session'

import { env } from '../config'
import { router } from '../lib'

export const axiosInstance = axios.create({
  baseURL: env.VITE_API_BASE_URL
})

axiosInstance.interceptors.request.use(config => {
  const {
    tokens: { accessToken }
  } = getSessionStore()

  if (config?.headers && accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`
  }

  return config
})

axiosInstance.interceptors.response.use(
  r => r,
  async error => {
    const originalRequest = error.config

    if (
      error?.response?.status === 401 &&
      !originalRequest._retry &&
      !error.config.skipAuthRefresh
    ) {
      originalRequest._retry = true

      try {
        const {
          tokens: { refreshToken }
        } = getSessionStore()

        const tokens = await sessionService.getTokens({ refreshToken })

        sessionActions.setTokens(tokens)

        return axiosInstance(originalRequest)
      } catch (e) {
        if (
          e instanceof AxiosError &&
          e.response?.data?.message === 'ERR_JWT_EXPIRED'
        ) {
          sessionActions.logout()

          return router.navigate({ to: '/' })
        }

        throw e
      }
    }

    throw error
  }
)

I can deal with getting tokens, but i'm not really sure how to abstart logic with calling sessionService and actions.

In redux toolkit u can do something like this:

import { apiAccessTokenIsUpdatedEvent } from '~/shared/api'

export const sessionMiddleware = createListenerMiddleware<AppState, AppDispatch>()

// listen to event `apiAccessTokenIsUpdatedEvent`
sessionMiddleware.startListening({
  actionCreator: apiAccessTokenIsUpdatedEvent,
  effect: async () => {
    // ... store new tokens
  },
})

So I can trigger updates in shared api and use listen inside of the store, do you have a workaround for stan-js?

[Brentlok]

Hi! stan-js doesn’t ship with anything like Redux Toolkit’s createListenerMiddleware, but you have a couple of easy options:

1. Add a tiny event emitter in ~/shared/api (e.g. using mitt or your own), emit an event from your Axios interceptor, and subscribe to those events next to your store to trigger actions
2. If your session logic is truly global, you could consider moving it into the shared layer so your API instance can import it directly—just double-check that it still fits your feature-slice boundaries.
   Hope that helps you decouple the layers without introducing circular dependencies! 😄

[chertik77]

Hi! stan-js doesn’t ship with anything like Redux Toolkit’s createListenerMiddleware, but you have a couple of easy options:

1. Add a tiny event emitter in ~/shared/api (e.g. using mitt or your own), emit an event from your Axios interceptor, and subscribe to those events next to your store to trigger actions
2. If your session logic is truly global, you could consider moving it into the shared layer so your API instance can import it directly—just double-check that it still fits your feature-slice boundaries.
   Hope that helps you decouple the layers without introducing circular dependencies! 😄

So there is no way to have it as a part of the store?

[Brentlok]

As of now - no

But if you have any suggestions how such API should look like - we may consider adding it to the core

[chertik77]

As of now - no

But if you have any suggestions how such API should look like - we may consider adding it to the core

I'm not a pro in this stuff , but maybe your custom action builder could potentially listen to internal functions? Or some type of store middleware?