Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Redux with a UseState Hook

hooked-on-redux.js.org

Post reply on HN
Print view View original

11–20 of 24 posts

Re: Show HN: Redux with a UseState Hook

#11

Post by odensc »

cercatrova wrote: post #10

I said this in another comment, but similarly to this, check out Redux Toolkit ( 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.

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?

Re: Show HN: Redux with a UseState Hook

#12

Post by cercatrova »

odensc wrote: post #11
cercatrova wrote: post #10

I said this in another comment, but similarly to this, check out Redux Toolkit ( 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.

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?

It does indeed. If you check out the advanced tutorial on the site you'll see it's in TypeScript.

Re: Show HN: Redux with a UseState Hook

#14

Post by danlugo92 »

cercatrova wrote: post #10

I said this in another comment, but similarly to this, check out Redux Toolkit ( 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.

It gets messy once you want to do anything advanced. And even when slices depend on each other (circular dependencies will arise).

Re: Show HN: Redux with a UseState Hook

#15

Post by mikewhy »

harrisonhope wrote: post #5
cakerace wrote: post #3

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

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

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.

Re: Show HN: Redux with a UseState Hook

#16

Post by 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

[1] https://redux.js.org/style-guide/style-guide#put-as-much-log...

[2] https://redux.js.org/style-guide/style-guide#reducers-should...

[3] https://redux.js.org/style-guide/style-guide#model-actions-a...

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

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

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

Re: Show HN: Redux with a UseState Hook

#17

Post by acemarke »

cercatrova wrote: post #10

I said this in another comment, but similarly to this, check out Redux Toolkit ( 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.

Great, glad to hear RTK is working well for you!

Re: Show HN: Redux with a UseState Hook

#18

Post by acemarke »

odensc wrote: post #11
cercatrova wrote: post #10

I said this in another comment, but similarly to this, check out Redux Toolkit ( 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.

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?

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

Re: Show HN: Redux with a UseState Hook

#19

Post by acemarke »

harrisonhope wrote: post #7
sansnomme wrote: post #2

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.

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.

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.

Re: Show HN: Redux with a UseState Hook

#20

Post by acemarke »

danlugo92 wrote: post #14
cercatrova wrote: post #10

I said this in another comment, but similarly to this, check out Redux Toolkit ( 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.

It gets messy once you want to do anything advanced. And even when slices depend on each other (circular dependencies will arise).

Can you clarify what you mean by "messy" and "advanced"?

Circular dependencies are indeed a potential issue, but most people are unlikely to run into that, and we talk about ways to handle that in the docs:

https://redux-toolkit.js.org/usage/usage-guide#exporting-and...

Post reply on HN