react-session-store v1.0.15

react-session-store

A data persistence layer for a react/next-app. It can be also used for state-management (see examples/todo-app)

Change logs

• Fix bug on dependency update

Example usage

1) Using javascript

a) Define and initialize your store

/**
 * Extend SessionStore for session storage
 * Extend LocalStore for local storage
 */ 
class UserStore extends SessionStore {
  /**
   * Initialize your data
   * */
  constructor() {
    super();
    this.users = [];
  }
  // getters for your data
  get users() {
    return this.getData("_users");
  }
  // setter for your data
  set users(users: Array<IUser>) {
    this.setData("_users", users);
  }
  /**
   * @optional
   * Lifecycle hooks
   * Put all your startup code here. e.g.=> api calls set data
   */
  async init() {  // note that init is async
    await super.init();
    // optional startup logic
    // for example: make api calls to set initial data
    // this block is also used for depedency management
  }
  /**
   * @optional
   * Put all your cleanup code here
   */ 
  destroy() {
    // optional cleanup 
  }
}

export new UserStore();

b) In your root page component, handle store lifecycle

4) Handle store lifecycle

  useEffect(() => {
    // initialize store
    UserStore.init();
    return () => {
      // destroy store
      UserStore.destroy();
    }
  }, []);
  

Summary of what is happenning?

• Define your store BaseSessionStore - data persistence with session storage BaseLocalStore - data persistence with local storage
• Add data getters and setters for your store.
• Initialize all data in the constructor
• Lifecycle (optional) Put all your startup logic in the init block. (optional) Put all your cleanup logic in the destroy block.

2) Example usage using typescript

a) Define your data

interface IUser {
  name: string;
  email: string;
  age: number;
  gender: string;
}

b) Create your store class and inherit SessionStore like below

class UserStore extends SessionStore<IUser> {
  
}

Rest of the steps are same with javascript usage.

Advanced usage

• 1) name of your store
• 2) handle store dependencies
• 3) isReady - flag to indicate your store has been initialized from data persistence layer (e.g.-> data is loaded from session storage / local storage)
• 4) isStoreReady - flag to indicate that the store has been initialized (from init block) and it is ready for serving data to its consumers (other stores/componenets etc.)

class UserStore extends SessionStore {
  /**
   * Initialize your data
   * */
  constructor() {
    super("name_of_your_store", );
    this.users = [];
  }
}
/**
* Store1, Store2 - name of dependent stores,
* Store1, store 2 will be initialized first before initializing current store
*/
export new UserStore(Store1, Store2);