Cannot view updated parent space state when using useParentSpace() [react-redux-subspace] [redux-thunk]

[sean-gilmore]

Hi there, I have an issue when trying to access my updated parent space state after dispatching a thunk action to the parent space.

The issue is described as below:

import React, {useEffect} from 'react'
import { useParentSpace } from 'react-redux-subspace'
import { thunkAction } from 'somwhere'

const MyComponent = () => {
  const parentSpace = useParentSpace()

  useEffect(
    () => {
      parentSpace.dispatch(thunkAction())
    }, [parentSpace]
  )

  const { parentValue } = parentSpace.getState();
  return (
    <div>
      <p>{parentValue}</p>
    <div>
  )
}

I believe that when I dispatch my action, I should be able to see the result of parentValue that my thunkAction() updates.

The issue is that it seems like my component does not update to show me the new value of parentValue, even though I can see that my parent state has been updated (using the redux dev tool extension).

Any help would be appreciated 😃

[mpeyper]

Yeah, this should work. I'll take a closer look when I get a chance. If you want to speed me up, set up a repo, codesandbox or unit test in this repo that replicates the issue.

[sean-gilmore]

Hey @mpeyper, haven't had a chance to set up a codesandbox just yet, but I believe this is the same issue as described in the redux documentation for the useStore() hook. I believe that you'd need to implement a hook similar to useSelector() that can access the parent store. I'll have a go tomorrow, but it might be a little outside my wheelhouse.

[sean-gilmore]

Hey @mpeyper, I've created an example of the issue in this repo: https://github.com/sean-gilmore/redux-subspace-hooks-example

[mpeyper]

Thanks. I'm actually on holiday for the next week, but I'll take a look if I have some spare time.

[sean-gilmore]

All good! Will see how I go working on a fix. Enjoy the holiday 😄 🏖

[sean-gilmore]

Hey @mpeyper, I've found a createSelectorHook function in the react-redux project, that seems to allow you to create a new selector hook with a given context. I'm not super familiar with the concept of context in React, but do you think this would be the right avenue to keep investigating?
https://github.com/reduxjs/react-redux/blob/master/src/hooks/useSelector.js

[mpeyper]

No, unfortunately I do not believe the issue lies in with context the selector is created with. One of the things we do is import the same default context so it's supposed to work out of the box (very few people actually override this with there own context, as far as I'm aware).

I'm a little bit confused why this is even a problem. The parent space functionality is literally just a reference to the original, unmodified store used as the base when creating the subspace, so any selectors, dispatches and subscriptions should work identically to if they were connected from outside the subspace all together (i.e. if you weren't using redux-subspace at all.

[mpeyper]

Ok, looking more closely at your sandbox, I can see that you are not actually subscribing to the store changes, but rather called parentState.getState() as part of rendering. The lack of any other trigger to cause react to rerender causes the ui to appear to freeze, although the store has actually updated the value.

Here is a fork of your sandbox that shows that if you do subscribe to the store, you get the intended update to the component:

https://codesandbox.io/s/heuristic-carson-pjbte

Another way to have it work is to use the react-redux hooks from a nested component within a ParentSpaceProvider:

https://codesandbox.io/s/magical-roentgen-fup89

Obviously this isn't the code you were expecting to write, and it's possible that the exposed hooks from our API actually don't hold much use but should rather have accompanying useParentDispatch and useParentSelector hooks that use the more primitive useParentSpace hook but also handle the subscription parts more eloquently for you.

[sean-gilmore]

Awesome! Thanks Michael, I'll give these a go tomorrow. Any way that I can send you some beer money for your help?

[mpeyper]

I'm feeling like we should add the companion hooks to make the hooks we export actually useful. I'm struggling to imagine a use-case where I want a reference to the parent space in my components but not rerender when the parent store updates. Even the react-redux docs suggest the useStore hook should be rarely used.

I'm also thinking that the same reasoning is true for the useSubspace hook and we should also provide companion hooks for that one as well.

I'm a little worried that the solution in the sandbox I linked that mimicked the behaviour by subscribing to the store is a bit naive and the correct implementation will end up looking like a copy of react-redux's useSelector hook.

Any way that I can send you some beer money for your help?

Thanks, but this package is owned by the company I work for, from whom I'm already compensated, so I would not feel comfortable accepting beer money for it.

[mpeyper]

Closing. Please see #546 for details.