npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mobx-dispatcher-router

v0.1.0

Published

The Store & Route in one solution designed to be used with mobX and react

Downloads

3

Readme

MobX Dispatcher

Warning

  • This repository is not part of mobx project
  • Project is still under development, please use with caution

What is this;

MobX Dispatcher is a manager of mobx states and simple but suprisingly powerful functional router. The idea behind the project is to give the state 100% control of rendered content instead of sharing logic with component based routers like react-router.

How does it work?

Stores management

MobX Dispatcher take cares of all your store classes. So instead of this:

const stores = {
  content: new ContentStore(),
  ui: new UIStore(),
  auth: new AuthStore(),
  etc: EtcStore()
}

ReactDOM.render(
  <Provider {...stores}>
    <App />
  </Provider>,
  document.getElementById('root')
);

you can write this:

import Dispatcher from 'mobx-dispatcher';

const dispatcher = new Dispatcher();

dispatcher.attachStore(ContentStore);
dispatcher.attachStore(UIStore, 'ui'); //Because uI ooks kind of weird
dispatcher.attachStore(AuthStore);
dispatcher.attachStore(EtcStore);

dispatcher.start() //call when all the stores are attached and you want to render initial page

ReactDOM.render(
  <Provider {...dispatcher.stores}>
    <App />
  </Provider>,
  document.getElementById('root')
);

console.log(Object.keys(dispatcher.stores)) // ['content', 'ui', auth', 'etc', 'nav']

Sounds boring? It's not all!

Stores access and callbacks

By attaching your store class to the dispatcher, your store objects will receive stores property so they can easily access properties and/or actions of other stores.

Also, Stores attached to dispatcher can use two callbacsk:

onAttach is called, suprisingly, when the store is attached to the dispatcher. onRouterStart is triggered when dispatcher.start() function is called.

Not amazed yet? Let's wait for...

Routing

State management and callbacks are cool, but they are not the reason why this library was written. So, how does the routing works?

Every store assigned to MobX Dispatcher can register it own routes. The best place to do it is, of course in the onAttach callback. Lets check this example;

class AuthStore {

  @observable userSiged = false;

  onAttach() {
    this.addRoute('/signin', () => { this.showSignupPage()})
  }
  @action showSignupPage() {
    if (this.userSigned) {
      this.stores.ui.showMessage("You are already signed");
      this.changePath('/');
    } else {
      this.stores.ui.showComponent('signin');
    }
  }
}

As you might can see, the Dispatcher not only adds the stores property, but also provides three extra methods:

  • navigateTo(path) change the route in the browser and refresh the page
  • changePath(path) unlike navigateTo, changePath does not keep previous page in user history
  • addRoute(path,callback) map the route to the store action. Always define callback as arrow function!

Routing from components

If you are using MobX Dispatcher together with react, you might be curious how to access router from your components. If you paid attention in our second example, you might noticed that we attached four stores to the component but dispatcher.stores actually had five items. The nav store is provided automatically by Dispatcher and you can access is as any other MobX store.

@connectTo('nav')
class Navigation extends Component {
  render() {
    return(
      <Navbar>
        <NavItem active={this.props.nav.path === "/"} onClick={ this.props.nav.goTo("/")}>Home</NavItem>
      </Navbar>
    );
  }
}

actions goTo and changeTo are equivalent to the store methods navigateTo and changePath.

How to use route parameters?

Simply!

class ContentStore {
  @action showCategory(id,page) {
    //...loadSomeData from backand
  }

  onAttach() {
    this.addRoute('/category/:id/page/:page', ({id,page}) => { this.showCategory(id,page)}
  }
}

FAQ

Q: Which patterns can I use in my routes?
A: Dispatcher is using https://github.com/rcs/route-parser. Check it to learn more about route patterns

Q: Why should I use it?
A: If you are happy with your current router then you probably should not. The basic idea behind this is actually super simple. To avoid the separation of app logic between router and global state, all routes are directly maps to store actions.

Q: I like this but I am missing some functionality:
A: Fork it and implement it. Or make a pull request. Or write a suggestions and maybe I can really add it