HubSpot/general-store

// namespace import
import * as GeneralStore from 'general-store';
// or import just your module
import { define } from 'general-store';

var dispatcher = new Flux.Dispatcher();
function defineUserStore() {
  // data is stored privately inside the store module's closure
  var users = {
    123: {
      id: 123,
      name: 'Mary',
    },
  };

  return (
    GeneralStore.define()
      .defineName('UserStore')
      // the store's getter should return the public subset of its data
      .defineGet(function() {
        return users;
      })
      // handle actions received from the dispatcher
      .defineResponseTo('USER_ADDED', function(user) {
        users[user.id] = user;
      })
      .defineResponseTo('USER_REMOVED', function(user) {
        delete users[user.id];
      })
      // after a store is "registered" its action handlers are bound
      // to the dispatcher
      .register(dispatcher)
  );
}

import { Dispatcher } from 'flux';
import * as GeneralStore from 'general-store';

var dispatcher = new Dispatcher();
var users = {};

var UserStore = GeneralStore.define()
  .defineGet(function() {
    return users;
  })
  .register(dispatcher);

export default UserStore;

dispatcher.dispatch({
  actionType: 'USER_ADDED', // required field
  data: {
    // optional field, passed to the store's response
    id: 12314,
    name: 'Colby Rabideau',
  },
});

var UserStoreFactory = GeneralStore.defineFactory()
  .defineName('UserStore')
  .defineGetInitialState(function() {
    return {};
  })
  .defineResponses({
    USER_ADDED: function(state, user) {
      state[user.id] = user;
      return state;
    },
    USER_REMOVED: function(state, user) {
      delete state[user.id];
      return state;
    },
  });

describe('UserStore', () => {
  var storeInstance;
  beforeEach(() => {
    // each test will have a clean store
    storeInstance = UserStoreFactory.register(dispatcher);
  });

  it('adds users', () => {
    var mockUser = { id: 1, name: 'Joe' };
    dispatcher.dispatch({ actionType: USER_ADDED, data: mockUser });
    expect(storeInstance.get()).toEqual({ 1: mockUser });
  });

  it('removes users', () => {
    var mockUser = { id: 1, name: 'Joe' };
    dispatcher.dispatch({ actionType: USER_ADDED, data: mockUser });
    dispatcher.dispatch({ actionType: USER_REMOVED, data: mockUser });
    expect(storeInstance.get()).toEqual({});
  });
});

UserStore.get(); // returns {}
var subscription = UserStore.addOnChange(function() {
  // handle changes!
});
// addOnChange returns an object with a `remove` method.
// When you're ready to unsubscribe from a store's changes,
// simply call that method.
subscription.remove();

const FriendsDependency = {
  // compound fields can depend on one or more stores
  // and specify a function to "dereference" the store's value.
  stores: [ProfileStore, UsersStore],
  deref: props => {
    friendIds = ProfileStore.get().friendIds;
    users = UsersStore.get();
    return friendIds.map(id => users[id]);
  },
};

function FriendsList() {
  const friends = GeneralStore.useStoreDependency(
    FriendsDependency,
    {},
    dispatcher
  );
  return (
    <ul>
      {friends.map(friend => (
        <li>{friend.getName()}</li>
      ))}
    </ul>
  );
}

const dependencies = {
  // simple fields can be expressed in the form `key => store`
  subject: ProfileStore,
  friends: FriendsDependency,
};

// ProfileContainer.js
function ProfileContainer({ friends, subject }) {
  return (
    <div>
      <h1>{subject.name}</h1>
      {this.renderFriends()}
      <h3>Friends</h3>
      <ul>
        {Object.keys(friends).map(id => (
          <li>{friends[id].name}</li>
        ))}
      </ul>
    </div>
  );
}

export default connect(
  dependencies,
  dispatcher
)(ProfileComponent);

const dependencies = {
  users: UsersStore,
  friends: {
    stores: [ProfileStore],
    deref: (props, deps) => {
      friendIds = ProfileStore.get().friendIds;
      return friendIds.map(id => deps.users[id]);
    },
  },
};

var dispatcher = new Flux.Dispatcher();
GeneralStore.DispatcherInstance.set(dispatcher);

const users = {};

const usersStore = GeneralStore.define()
  .defineGet(() => users)
  .register(); // the dispatcher instance is set so no need to explicitly pass it

function MyComponent() {
  // no need to pass it to "useStoreDependency" or "connect" either
  const users = GeneralStore.useStoreDependency(usersStore);
  /* ... */
}

type DispatcherPayload = {
  actionType: string,
  data: any,
};

type Dispatcher = {
  isDispatching: () => boolean,
  register: (handleAction: (payload: DispatcherPayload) => void) => string,
  unregister: (dispatchToken: string) => void,
  waitFor: (dispatchTokens: Array<string>) => void,
};