nareshbhatia / mobx-state-router

MobX-powered router for React apps
https://nareshbhatia.github.io/mobx-state-router/
MIT License
227 stars 31 forks source link

compatible with mobx-state-tree #101

Closed akaguny closed 3 years ago

akaguny commented 3 years ago

i'm really love this router for simple and clear. But in my case i want to use it with mobx-state-tree(mst). Any ideas for help with it? I think that possible to simple port router to mst, but don't like this solution. Also i can decorate router with mobx-state-tree with autorun for synchronization, but possible in will be little bit overhead

akaguny commented 3 years ago

Hi, i was success this case. I extend my store with routerStore property in volatile space of the MST model.

const RootStoreMst = types
  .model({
    ...
  })
  .volatile((self) => {
    const env = getEnv(self);
    const routerStore: RouterStore = initRouter(routes(self));
    return {
      routerStore,
    };
  });

store tree injected by argument

routes = (rootStoreMst) => {
  return [
    {
      name: "users",
      pattern: "/users",
      altPatterns: ["/"],
    },
    {
      name: "todos",
      pattern: "/todos",
      beforeEnter: async (/*fromState, toState, routerStore*/) => {
        if (rootStoreMst.dataStore.userStore.isEmpty) {
          alert("users not exist!");
          return usersRouterState;
        }
      },
    },
  ];
};