
Show HN: Redux with a UseState Hook - harrisonhope
https://hooked-on-redux.js.org
======
cercatrova
I said this in another comment, but similarly to this, check out Redux Toolkit
([https://redux-toolkit.js.org](https://redux-toolkit.js.org)), the `slices`
feature changed my view on Redux entirely. Basically you can have a per-
feature slice of functionality rather than having actions, reducers, and
constants spread around your code. It's analogous to what hooks did,
encapsulating similar functionality.

~~~
odensc
This is similar to how I've always implemented Redux before using some of my
own utilities, but it's nice they have an "official" way to do it now. Does it
work well with TypeScript?

~~~
acemarke
Yep, RTK is specifically written in TypeScript, and I have a co-maintainer
(Lenz Weber) who has done an amazing job working on the TS typedefs to make
sure it works well.

See the "Usage with TypeScript" docs page:

[https://redux-toolkit.js.org/usage/usage-with-typescript](https://redux-
toolkit.js.org/usage/usage-with-typescript)

~~~
odensc
That's great!

------
acemarke
I'm a Redux maintainer. As I said over on Reddit when this was posted:

The biggest issue is that it goes directly against the principles I listed in
the Redux Style Guide [0], particularly:

\- put as much logic as possible in reducers [1]

\- reducers should own the state shape [2]

\- model actions as "events", not "setters" [3]

Also, Dan pointed out early on in Redux's development that "cursor"-style
approaches to state updates are not how he intended people to use Redux [4].

Will it run? Sure. Is it something I'd actually recommend? Definitely not, and
especially given the existence of our official Redux Toolkit package [5] and
the React-Redux hooks API [6].

[0] [https://redux.js.org/style-guide/style-guide](https://redux.js.org/style-
guide/style-guide)

[1] [https://redux.js.org/style-guide/style-guide#put-as-much-
log...](https://redux.js.org/style-guide/style-guide#put-as-much-logic-as-
possible-in-reducers)

[2] [https://redux.js.org/style-guide/style-guide#reducers-
should...](https://redux.js.org/style-guide/style-guide#reducers-should-own-
the-state-shape)

[3] [https://redux.js.org/style-guide/style-guide#model-
actions-a...](https://redux.js.org/style-guide/style-guide#model-actions-as-
events-not-setters)

[4]
[https://github.com/reactjs/redux/issues/155#issuecomment-113...](https://github.com/reactjs/redux/issues/155#issuecomment-113951420)

[5] [https://redux-toolkit.js.org](https://redux-toolkit.js.org)

[6] [https://react-redux.js.org/api/hooks](https://react-
redux.js.org/api/hooks)

------
cakerace
Won't using string paths like lodash makes it hard to use this library with
typescript?

~~~
harrisonhope
Probably a fair point. I hadn't really taken typescript into account for the
purposes of this library.

~~~
mikewhy
Since in TS you can guarantee the user has optional chaining, so it may not be
that big a change

    
    
      // instead of
      useHookedOnState('app.components.counterValue', 0)
      // maybe
      useHookedOnState(state => state.app?.components?.counterValue, 0)
    

edit: on second thought, you're probably using that string in the setter as
well. dang.

~~~
harrisonhope
Yup, that's the "magic" part.

------
sansnomme
Considering how verbose the current UX of Redux is, this needs to be merged
into mainline React. Are there any significant performance overhead? This is a
really great library, the ergonomics look amazing and the documentation is
just gorgeous.

~~~
harrisonhope
Thanks. It uses useDispatch behind the scenes which I believe has a bit more
overhead compared to using connect. It should be comparable performance-wise
to using the normal react-redux hooks.

~~~
acemarke
Uh... wait, _what_?

`useDispatch` has absolutely no overhead whatsoever. It's literally just
`return store.dispatch`.

There's also less "overhead" in the sense that it's not pre-binding action
creators.

If you meant to say `useSelector` here, that also has less overhead than
`connect` because it's having to select less state and do fewer comparisons.

------
ipsum2
Looks similar to Recoil ([https://recoiljs.org/](https://recoiljs.org/)). How
does it differ?

~~~
harrisonhope
It's redux under the hood so with this library you'd be able to use existing
redux tooling such as redux dev tools. Usually that's not possible with
bespoke state management libraries (although I'm not familiar with Recoil)

------
nerdbites
Looks great. Is there any convenient way to persist data?

~~~
code_biologist
Yep, typically you'd do it by persisting the Redux state. redux-persist is a
popular library to do that to localstorage and other backends:
[https://github.com/rt2zz/redux-persist](https://github.com/rt2zz/redux-
persist)

