$state() utility

$state() is an accessor to get the state of your application anywhere in your app. It is a customizable utility to handle the global state of your applications.

When you don't need a global state?

You don't need a global state if the changes in components only affect the said components or when you can easily pass down whatever changed as props to the affected components.

When do you need a global state?

You most likely need a global state when many of your components depend on actions performed by one another. When your components have one-to-many or many-to-many relationships, you probably need a global state so that changes from components are centralized and it side effects are distributed.

• When changes in a component affect many other components that are not its direct children, it will be hard to be calling each of the components one by one, instead; the changed properties can be centralized so that all affected components can access it or it can fire all subscribed components.

Setup $state() utility

  import {setState} from './stateAndUtilSetup'
 
  const App = () => {
 
    let state = {
      songs,
      shuffle: false,
      repeat: false,
      selected: false,
      volume: 0,
      playingInterval: null,
    }
 
    setState(state);
  }

Use $state() utility

$state() takes no argument and it returns state object. It is immutable and can be used in various way.

• Get state

const state = $state()

state now contains everything in the state of your application.

• Get a property of the state

const users = $state().users
const posts = $state().posts

Reset the state

You can't reset the state with setState. It will throw an error. To do so, you must use $resetState.

• Add stateAndUtilSetup.js to the HTML page where you use resetState.

const Profile = () => {
  const updatedUserInfo = {
    name: 'John',
    age: 78
  }
 
  const state = $state();
  state.user = updatedUserInfo;
  resetState(state);
}

Update a property of the state

 const state = $state();
 state.update('shuffle', true);

In the code snippet above, we update shuffle (a property of the state) to true.

Subscribe to a property of the state

You can subscribe a component, function, class or module to a property of the state so that they are notified whenever the the propery changes.

export const Shuffle = (status=false) => {
  const state = $state();
  state.subscribe(Shuffle, "status");
  //the rest of the code
}

Subscribe multiple components to a property of the state.

export const Shuffle = (status=false) => {
  const state = $state();
  state.subscribe([Shuffle, Repeat], "status");
  state.subscribe([Songs, Player], song);
  //the rest of the code
}

It is recommended you subscribe components to some properties of the global state in a parent component.

Now, we have subscribed Shuffle to status (a property of the state) so that Shuffle will be called whenver status changes.

That is how to use the $state() utility in $render.

Click to check the common errors in using $state().