jonbnewman / mobx-store-provider Goto Github PK

The mapStateToProps parameter in useStore(identifier, mapStateToProps) is used to map a store to a "view" of it, there are no props on that. I understand the name was taken from redux inject, where it does make sense, but I don't think that's the case in this library

I believe it would be more suitable to call it mapStore or something along that.

When using useCreateStore, the factory method gets called whenever the host component is re-rendered.

I believe this is not the expected behavior, but some code might be relying on this.

This happens because it's called on the hook body:

function useCreateStore(factory: Factory): any {
  return useRef(factory()).current;
}

My suggestion is to replace this call with a memo-d value:

function useCreateStore(factory: Factory, deps: any = []) : any {
  return useMemo(factory, deps);
}

As I see you've taken the lead with functional components and useContext per mobxjs/mobx-state-tree#1363 (comment)

I'd like to use your lib with next.js, wondering if it would work.

The MST example vercel has is from a few years back and uses obsolete patterns (class components and injection) https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript

When I was new to MST I glossed over of the same type (not understanding what it meant) in this:

Accordingly when I added a new store (definition, not instance) I created a new nested <Provider> (as show on that page). In hindsight I think the RootStore pattern would have been more appropriate, but I wasn't aware of it because that page is titled Multiple stores.

Would you accept a PR to put a ⚠️ on that Multiple stores page that using a single provider and the RootStore approach is better* if you only have one instance of each model type?

* I argue that it's better for this reason.

When first looking at code using this library, it's hard to guess that createStore is a hook.

I believe following the pattern of prefixing it with use would better describe it.

This change would require a breaking update, but it can be preceded by a deprecation period, updating the docs to favor the new method.

Thanks for this nice library and the effort spent creating it.

Just to let you know I had issues with ES6 and Jest, it seems your library is not transformed into ES5 when publishing, is that the case or I missing something? So when trying to run a test in Jest (using default create-react-app configuration), I get the following error:

 PASS  src/atoms/Clock/Clock.test.tsx
 FAIL  src/organisms/Header/Header.test.tsx
  ● Test suite failed to run

    /Users/alanrubin/Keytree/Sense/matrix-sense-signage-ui/node_modules/mobx-store-provider/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import useProvider from "./hooks/useProvider";
                                                                                                    ^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      3 | import Clock from 'atoms/Clock'
      4 | import { observer } from 'mobx-react'
    > 5 | import { useStore } from 'mobx-store-provider'
        | ^
      6 | import { IAppStore } from 'models/AppStore'
      7 | import MatrixLogo from './matrix-logo.svg'

That seems to be caused because jest doesn't transpile the node_modules dir - I solved by adding to the package.json a jest configuration to transpile your library in node_modules:

"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!mobx-store-provider)/"
    ]
  }

But isn't it better to have the library published transpiled?

Thanks,
Alan