3.0.0-beta-26 • Published 4 months ago

justorm v3.0.0-beta-26

Weekly downloads
3
License
ISC
Repository
github
Last release
4 months ago

npm

Just Store Manager

Simple state/store manager based on Proxy.

API

  • createStore(name, object) – creates new store with provided name

    NOTE: Using with React or Preact you can pass this instead of name to create local component store.

    See Create local store.

  • withStore(config: string | object | array ) – subscribe component to store

    • withStore({ user: ['firstName'] }) – to field firstName of store user

    • withStore({ user: true }) – to all fields of store user

    • withStore('user') – to all fields of stores user

    • withStore(['user', 'auth']) - to all fields of stores user and auth

    • withStore(['user', { auth: ['isAuthorized'] }])

      • to all fields of stores user
      • and field isAuthorized of store auth
  • connect(storeName: string, fields: string[], callback: () => void) – subscribe callback to store.

  • disconnect(storeName: string, fields: string[], callback: () => void) – unsubscribe callback to store.

  • store.originalObject – returns original object (without Proxy wrapper)

Import

import { createStore, connect, disconnect } from 'justorm'; // for VanillaJS
// or
import { createStore, withStore } from 'justorm/react'; // for React
// or
import { createStore, withStore } from 'justorm/preact'; // for Preact

NOTE: You don't need to unsubscribe from store when usign decorator withStore. withStore do it for you.

Create local store

Demo.

class App extends Component {
  constructor(props) {
    super(props);
    this.store = createStore(this, { count: 0 });
  }

  onClick = () => {
    this.store.count++;
  };

  render() {
    const { count } = this.store;

    return [
      'Hi there!',
      count,
      <button onClick={this.onClick}>click me</button>,
    ];
  }
}

Create shared store

Describe store and actions in one place. Demo.

createStore('user', { isLogged: false, login() { this.isLogged = true; }, logout() { this.isLogged = false; }, });

## Create class-based store

You can also create a store using a class definition with the `createClassStore` function. This approach provides better TypeScript support and allows for more complex store structures.

```typescript
import { createClassStore } from 'justorm';

class UserStore {
  isLogged: boolean = false;

  login() {
    this.isLogged = true;
  }

  logout() {
    this.isLogged = false;
  }
}

const userStore = createClassStore('user', UserStore);

// Using the class-based store with withStore
withStore({ user: ['isLogged'] })(function App({ store }) {
  const { isLogged, login, logout } = store.user;

  const onClick = isLogged ? logout : login;
  const text = isLogged ? 'logout' : 'login';

  return <button onClick={onClick}>{text}</button>;
});

// You can also use withStore as a decorator for class components
@withStore({ user: ['isLogged'] })
class AppClass extends Component {
  render({ store }) {
    const { isLogged, login, logout } = store.user;
    const onClick = isLogged ? logout : login;
    const text = isLogged ? 'logout' : 'login';

    return <button onClick={onClick}>{text}</button>;
  }
}

// Specify store fields that you want to get updates from

  const onClick = isLogged ? logout : login;
  const text = isLogged ? 'logout' : 'login';

  return <button onClick={onClick}>{text}</button>;
});

Use withStore as decorator for class components.

@withStore({ user: ['isLogged'] })
class App extends Component {
  render({ store }) {
    const { isLogged, login, logout } = store.user;
    const onClick = isLogged ? logout : login;
    const text = isLogged ? 'logout' : 'login';

    return <button onClick={onClick}>{text}</button>;
  }
});

Vanilla JS

Demo.

import { createStore, connect, disconnect } from 'justorm';

const myStore = createStore('my-store', {
  isLogged: false;
  user: null
});

function onLoggedChange() {
  console.log(myStore.isLogged ? 'Welcome!' : 'See ya!');
}
function onAnyFieldChange() {
  console.log('Some field changed:', myStore);
}

connect('my-store', ['isLogged'], onLoggedChange);
connect('my-store', onAnyFieldChange);

myStore.isLogged = true;
// Welcome!
// Some field changed: { isloggeg: true, user: null }
console.log('-----------');

myStore.user = 'Jess';
// Some field changed: { isloggeg: true, user: 'Jess' }
console.log('-----------');

Object.assign(myStore, { isLogged: false, user: null });
// See ya!
// Some field changed: { isLogged: false, user: null }
// Some field changed: { isLogged: false, user: null }

disconnect('my-store', onLoggedChange);
disconnect('my-store', onAnyFieldChange);
3.0.0-beta-20

5 months ago

3.0.0-beta-21

5 months ago

3.0.0-beta-22

5 months ago

3.0.0-beta-23

5 months ago

3.0.0-beta-24

5 months ago

3.0.0-beta-25

4 months ago

3.0.0-beta-26

4 months ago

3.0.0-beta-12

8 months ago

3.0.0-beta-13

8 months ago

3.0.0-beta-15

5 months ago

3.0.0-beta-16

5 months ago

3.0.0-beta-17

5 months ago

3.0.0-beta-18

5 months ago

3.0.0-beta-19

5 months ago

3.0.0-beta-11

9 months ago

3.0.0-beta-9

1 year ago

3.0.0-beta-10

1 year ago

3.0.0-beta-8

1 year ago

3.0.0-beta-6

1 year ago

3.0.0-beta-7

1 year ago

3.0.0-beta-5

1 year ago

3.0.0-beta-2

1 year ago

3.0.0-beta-1

1 year ago

3.0.0-beta-3

1 year ago

2.1.3

3 years ago

1.4.1

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.0.5

4 years ago

2.0.6

4 years ago

2.1.0

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.2.1

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago