getDispatch should return all dispatch functions.

[rolandzwaga]

Hey there,

I'm in the process of porting my app from Reactn 1.0 to 2.0.
Now I run into trouble when I'm rendering, for example, a list of components in a separate (nested) function, where I want to use a reducer in the nested function.
I.e.:

return (
  <SomeComponent>
    {renderChildComponentsWhereIUseReducers()}
  </SomeComponent>
)

I used to be able to just use getGlobal()[reducerName] to get a reference to one of my reducers, but in 2.0 I can only find the useDispatch hook to do this with. Unfortunately, I run into errors when using hooks in nested functions...

Is there another way of retrieving a reducer that I'm not aware of?

I appreciate your time and help in this.

cheers,

Roland

[quisido]

useDispatch(reducerName) would be the correct usage.

Unlike 1.0, you cannot do useDispatch()[reducerName], but I am not opposed to adding that functionality.

Was your error that you were trying to do useDispatch()[reducerName]? If not, what is the actual error message or code snippet?

[rolandzwaga]

Hey Charles,

the error is that I'm not allowed to use hooks in a nested function. In a function component you're only allowed to access a hook from the toplevel of that function. (https://reactjs.org/docs/hooks-rules.html)
So if, as I show in my example, I'm using a nested function to do some rendering and IN that function I'm using useDispatch() I'll get runtime errors once useDispatch is being called.
This is the exact error I'm getting:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

[rolandzwaga]

Basically what I need is a 'non-hook' way of retrieving a reducer

[quisido]

Can you show the implementation of renderChildComponentsWhereIUseReducers? Or a minimal implementation of your code that is triggering this error? I understand your description in your last comment, but not how it ties to your code given in the original post.

I am also in favor of a getDispatch function, much the way there is a getGlobal helper function; but there may be a "more correct" implementation for your code, and I want to have a full context of use cases.

[rolandzwaga]

Sure, here's some simpliefied version of it:

function renderChildComponentsWhereIUseReducers() {
  // The following line will trigger the error because the hook is used in a nested function:
  const reducer = useDispatch('myReducer');
  return (
    <a onClick={reducer()}>Click me</a>
  )
}
....

return (
  <SomeComponent>
    {renderChildComponentsWhereIUseReducers()}
  </SomeComponent>
)

Like I say, this is much dumbed down version of my code. In actuality I'm rendering a list of menu items based on some configuration where each item has an onClick method in which a reducer is used. The reducer is retrieved dynamically based on a key that is the same configuration.

I hope I'm making sense ;)

I see why hooks can only be called in the body of a component function, but as for retrieving reducers, I don't think that would mess with the component lifecycle. Hence a getDispatch method would certainly be useful.

[quisido]

This feature is added and will deploy with 2.0.1 soon. Probably today.

[rolandzwaga]

Thank you so much! And thanks for your work on reactn, I'm enjoying this library a lot!