How to easily access the state from anywhere in the application

When working with large applications organizing code in separate files and directories is the go-to way and the Valtio state is no exception. In some ways you may want to put the state object in its own file. After being separated in its own file we need a way to access it easily from anywhere in our application.

Access the state using Path Aliases

Imagine that the state is put in /src/state.js and you are working with a file in /src/really/deep/nested/file/myfile.js the importing of the state will be something like this: import state from '../../../../state'; which can cause too much brain calculation specially if it is used in different places inside the application.

A solution to that is using Path Aliases which maps path to a simpler string and the import will look like something similar to that throughout the whole application:

import { state } from '@state';

Using JS Config and Babel Config

Create the file /src/state and put the Valtio state into it:

import { proxy, useSnapshot, subscribe } from 'valtio'
const state = proxy({
  foos: [],
  bar: { ... },
  boo: false
})
export { state, useSnapshot, subscribe }

Create the file /jsconfig.json (or /tsconfig.json if you're using typescript):

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@state/*": ["./state/*"],
      "@mypath/*": ["./my/deep/path*"],
      "@anotherpath/*": ["./my/another/deep/path*"]
    }
  },
  "exclude": ["node_modules"]
}

💡 Using TypeScript? Here are some links for reference
https://www.totaltypescript.com/tsconfig-cheat-sheet
https://github.com/tsconfig/bases
https://www.typescriptlang.org/tsconfig/

Add the Module Resolver plugin the plugins in your babel.config.js:

module.exports = {
  // ...
  plugins: [
    // The other existing plugins
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.js', '.jsx', '.json', '.svg', '.png'],
        alias: {
          '@state': './src/state',
        },
      },
    ],
    // ...
  ],
}

Install the the Babel Plugin Module Resolver:

Using NPM: npm install babel-plugin-module-resolver
Using Yarn: yarn add babel-plugin-module-resolver

Restart the application server
That's it you will now be able to do import { (state, useSnapshot, subscribe) } from '@state'; from anywhere inside your application.

Using a third party library

You can use a third party library to create aliases and achieve the same result.

Example of libraries:

Module Alias