feat: draft implementation of useStore in #733 (not production ready)

[billyrrr]

Co-authored-by: pablopalacios pablo.palacios@holidaycheck.com

I confirm that this contribution is made under the terms of the license found in the root directory of this repository's source tree and that I have the authority necessary to make this contribution on behalf of its copyright owner.

[pablopalacios]

Cool, let's go step by step. Important tests that we should have:

• It registers/unregsiters to the given store
• It updates when the store is updated

You can take a look at connectToStores tests as reference. As I mentioned in the issue, one thing that I'm concerned is the unregister part. We must make sure that when the component unmounts, we are removing the listener, otherwise we will have a memory leak.

[pablopalacios]

Why do we need to use useLayoutEffect and not just useEffect?

[billyrrr]

The original test would fail for useEffect. I think that the following would take place with useEffect:

1. render and return
2. Test runs assertions on the return
3. Actions in useEffect is triggered
   This causes the assertions in 2 to fail.

With useLayoutEffect:

1. Render
2. Actions in useLayoutEffect is executed and waited to be finished
3. Test runs assertions on the return

Basically, it is just to ensure the same behavior as connectToStore.

[pablopalacios]

Got it. Could you please take a look how react-redux is handling this issue: https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/#connect-is-implemented-using-hooks
They are also using useLayoutEffect but on SSR they use useEffect to prevent the warning message.

[pablopalacios]

This is how they do: https://github.com/reduxjs/react-redux/blob/adade2069061e09eaa046b10389aee265048e034/src/components/connect.tsx#L56

[pablopalacios]

Just to make it simple to navigate between code blocks, I would recommend you to add one blank line between each test.

[billyrrr]

Yep, I can do that. The IDE handles most of the reformatting though, so I might approach it by adding a lint rule.

[redonkulus]

@billyrrr @pablopalacios Still interested in this feature?

[pablopalacios]

@redonkulus I do. At work we are using 2 custom hooks for stores: useStore and useStoreSubscription. The difference is that the later one subscribes to changes for the given store while the first not. We normally use the first when we are sure that the data is static (normally server side data). If this difference is not confusing you, I would propose to include both of them in the API (or, if you have a better idea...).

This is an example on how we use it:

function MyComponent() {
    const { locale } = useStore(AppStore).getState();
    const { count } = useStoreSubscription(CountStore).getState();

    return <span>Count: {new Intl.NumberFormat(locale).format(count)}</span>;
}

We have been using these hooks in production successfully since probably the time this PR was created. @billyrrr do you still have interested in moving the PR forward, otherwise I can prepare another one.

[billyrrr]

Yep, I can continue to work on this issue.