5 ms·

Show HN: Redux with a UseState Hook

39 points by harrisonhope 6y ago

sansnomme 6y ago
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 6y ago
  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 6y ago
    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.
- cercatrova 6y ago
  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.
cakerace 6y ago
Won't using string paths like lodash makes it hard to use this library with typescript?
- harrisonhope 6y ago
  Probably a fair point. I hadn't really taken typescript into account for the purposes of this library.
  - mikewhy 6y ago
    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 6y ago
      Yup, that's the "magic" part.
nerdbites 6y ago
Looks great. Is there any convenient way to persist data?
- code_biologist 6y ago
  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
ipsum2 6y ago
Looks similar to Recoil (https://recoiljs.org/ https://recoiljs.org/). How does it differ?
- harrisonhope 6y ago
  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)
cercatrova 6y ago
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 6y ago
  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?
  - cercatrova 6y ago
    It does indeed. If you check out the advanced tutorial on the site you'll see it's in TypeScript.
  - acemarke 6y ago
    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 6y ago
      That's great!
- danlugo92 6y ago
  It gets messy once you want to do anything advanced. And even when slices depend on each other (circular dependencies will arise).
  - acemarke 6y ago
acemarke 6y ago
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-logic-as-possible-in-reducers https://redux.js.org/style-guide/style-guide#put-as-much-log... [2] https://redux.js.org/style-guide/style-guide#reducers-should-own-the-state-shape https://redux.js.org/style-guide/style-guide#reducers-should... [3] https://redux.js.org/style-guide/style-guide#model-actions-as-events-not-setters https://redux.js.org/style-guide/style-guide#model-actions-a... [4] https://github.com/reactjs/redux/issues/155#issuecomment-113951420 https://github.com/reactjs/redux/issues/155#issuecomment-113... [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

39 points by harrisonhope 6y ago

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 6y ago
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 6y ago
  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.
cercatrova 6y ago
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.

cakerace 6y ago

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

harrisonhope 6y ago
Probably a fair point. I hadn't really taken typescript into account for the purposes of this library.
- mikewhy 6y ago
  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 6y ago
    Yup, that's the "magic" part.

nerdbites 6y ago

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

code_biologist 6y ago
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

ipsum2 6y ago

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

harrisonhope 6y ago
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)

cercatrova 6y ago

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 6y ago
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?
- cercatrova 6y ago
  It does indeed. If you check out the advanced tutorial on the site you'll see it's in TypeScript.
- acemarke 6y ago
  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 6y ago
    That's great!
danlugo92 6y ago
It gets messy once you want to do anything advanced. And even when slices depend on each other (circular dependencies will arise).
- acemarke 6y ago

acemarke 6y ago

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-logic-as-possible-in-reducers https://redux.js.org/style-guide/style-guide#put-as-much-log... [2] https://redux.js.org/style-guide/style-guide#reducers-should-own-the-state-shape https://redux.js.org/style-guide/style-guide#reducers-should... [3] https://redux.js.org/style-guide/style-guide#model-actions-as-events-not-setters https://redux.js.org/style-guide/style-guide#model-actions-a... [4] https://github.com/reactjs/redux/issues/155#issuecomment-113951420 https://github.com/reactjs/redux/issues/155#issuecomment-113... [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