Simple store-prototype example for a User Store + View

UserStore.js

var Store = require('store-prototype');

var UserStore = new Store();
var users = {};
var loaded = false;

UserStore.extend({
  loadUsers: function() {
    loadUsersSomehow(function(err, results) {
      users = results;
      this.notifyChange();
    });
  },
  getUsers: function() {
    if (!loaded) this.loadUsers();
    return users;
  },
  getUser: function(id) {
    return users[id];
  },
  isLoaded: function() {
    return loaded;
  },
  updateUser: function(data) {
    updateUserSomehow(data, function(err, result) {
      users[result.id] = result;
      this.notifyChange();
    });
  },
  removeUser: function(id) {
    delete users[id];
    this.notifyChange();
    removeUserSomehow(id, function(err) {
      // rollback on err maybe?
    });
  }
});

module.exports = UserStore;

UserView.js

var UserStore = require('UserStore');

var UserView = React.createClass({
  getInitialState: function() {
    return this.getUserState();
  },
  getUserState: function() {
    return {
      users: UserStore.getUsers(),
      ready: UserStore.isLoaded()
    };
  },
  updateUserState: function() {
    this.setState(this.getUserState());
  },
  componentDidMount: function() {
    UserStore.addChangeListener(this.updateUserState);
    if (!this.state.ready) UserStore.loadUsers();
  },
  componentWillUnmount: function() {
    UserStore.removeChangeListener(this.updateUserState);
  },
  render: function() {
    if (!this.ready) return <div>Loading...</div>;
    return <UserList users={this.state.users} />;
  }
});

var UserList = React.createComponent({
  render: function() {
    var rows = this.props.users.map(function(user) {
      return <UserRow user={user} />
    });
    return <div>{rows}</div>;
  }
});

var UserRow = React.createComponent({
  removeUser: function() {
    UserStore.removeUser(this.props.user.id);
  },
  render: function() {
    return (
      <div>
        {this.props.user.name}
        <button onclick={this.removeUser}>remove</button>
      </div>;
  }
});

To create a simple store-prototype for a User Store + View, follow these steps:

1. Set Up a User Store:
   Use a basic JavaScript object or a library like Redux for managing the user state. Example:

   const userStore = {
       users: [],
       addUser(user) {
           this.users.push(user);
       },
       getUsers() {
           return this.users;
       },
   };

2. Create a View:
   Use HTML and JavaScript to display the user data.

   <div id="user-list"></div>
   <button onclick="addNewUser()">Add User</button>
   <script>
       function addNewUser() {
           const user = { name: 'John Doe', id: userStore.users.length + 1 };
           userStore.addUser(user);
           renderUsers();
       }
   
       function renderUsers() {
           const userList = document.getElementById('user-list');
           userList.innerHTML = userStore.getUsers()
               .map(user => `<p>${user.id}: ${user.name}</p>`)
               .join('');
       }
   </script>

3. Integrate:
   Combine the store and view for dynamic updates when the store changes.

For a detailed implementation, www.goodwilloutlets.net.