troch / reinspect

Use redux devtools to inspect useState and useReducer :mag_right:
MIT License
424 stars 24 forks source link

App crash when trying to pass an id as 3rd param on useReduce from reinspect : "Initializer is not a function" #30

Open BobLamarley opened 4 years ago

BobLamarley commented 4 years ago

Hi guys, Maybe anyone already experiment my problem :) I'm trying to pass an id as 3rd param, as same as the exemple of the doc, but unfortunately this lead to a crash of reinspect image For information, i'm using useState and useReducer from reinspect npm package and i've wrapped my entire App with StateInspector :)

antoniojps commented 4 years ago

Same here, I'm trying to understand what the initializer is, but from reading the docs I don't understand. What is the initializer?

The documentation is lacking an useReducer code example.

budavariam commented 4 years ago

I ran into this issue as well, when I passed a function, an object and a string as the third parameter. For a quick fix I passed a function that only returns its parameter as the third param, and added id as the fourth.

useReducer(reducerFn, initialValue, (a)=>a, "myUniqueID")

My Idea of what is happening

I inspected the code with 3 parameters, reducer, initialState and a string ID. I figured that this part assumes that the initializer is defined, and if it exists then it calls it as a function.

When we do not call it with a lazy init function as a third parameter, the initializer's default value will still be the reinspect.useReducer's 3rd param, but it is not a function, it is only a string.

I think this if branch knows that there is no initializer function (since the first param is a string), but it does not indicate this knowledge in any way, and the initializer stays the first param (the string ID), which is not going to be falsy (unless it is an empty string ofc), so it will be called as a function, and this error will occur.

So as a quick fix I passed a function that only returns its parameter as the third param, and added id as the fourth.

Singha360 commented 4 years ago

@budavariam

https://github.com/troch/reinspect/blob/4d0b4160afe6f51596b984ba9fde737d609ddedd/src/useReducer.ts#L121-L123

~Pretty sure that initializer should instead be id on line 123.~

Nevermind, didn't completely read through the useReducer function (reinspect version). Also instead of the workaround you proposed, you can also pass in undefined as the third parameter and then followed by the id as the fourth parameter.

Seems like this is the intended behavior though, because in the official docs for hooks, they do mention the lazy initialization that can be passed in as the third parameter for useReducer function from React as you mentioned.

So I suppose this issue can be closed? @BobLamarley

ADDITIONAL INFO: This info is mentioned on the bottom of the repo's readme...

flamerohr commented 4 years ago

proposed a fix in the code here https://github.com/troch/reinspect/pull/40

discobean commented 2 years ago

Had the same issue when passing null as the initializer. Passing undefined solves this.