API Generic
update()

update

The update method allows you to modify an existing value in the store at a specified path.

update<P extends Paths<T>>(
  path: P & string,
  value: PathValue<T, P> | ((prev: PathValue<T, P>) => PathValue<T, P>),
  notify: boolean = true
): void

Parameters

OptionTypeRequiredDescription
pathstringYesThe property path in the store. Can be nested using dot notation (e.g., 'user.profile.name').
valuePathValue<T, P> | ((prev: PathValue<T, P>) => PathValue<T, P>)YesThe new value to set or a function that receives the previous value and returns the new value.
notifybooleanNoWhether to trigger a re-render for components subscribed to this path in the store. Defaults to true.

Returns

void

Description

The update method modifies an existing value in the store's state at the specified path. Unlike set, it will not create the property if it doesn't exist. If notify is true (default), it will trigger re-renders in components that are subscribed to the updated path.

Important Note: If the property doesn't exist, update will not create it. Use set if you want to ensure the property is created.

Example

import { createStore } from '@devlab/store';
 
type StoreStates = {
  user: {
    name: string;
    age: number;
    preferences: {
      theme: 'light' | 'dark';
    };
  };
}
 
// Create a store
const store = createStore<StoreStates>({
  initialData: {
    user: {
      name: 'John Doe',
      age: 30,
      preferences: {
        theme: 'light'
      }
    }
  }
});
 
// Update a simple value
store.update('user.name', 'Jane Doe');
 
// Update using a function
store.update('user.age', (prevAge) => prevAge + 1);
 
// Update a nested value
store.update('user.preferences.theme', 'dark');
 
// Usage in a React component
function UserProfile() {
  const userName = store.use('user.name');
  const age = store.use('user.age');
 
  return (
    <div>
      <p>Name: {userName}</p>
      <p>Age: {age}</p>
      <button onClick={() => store.update('user.age', (age) => age + 1)}>
        Increment Age
      </button>
    </div>
  );
}

This example demonstrates how to use the update method to modify existing values in the store, including using a function to update based on the previous value.