Re:React has grown beyond its original promise and it's caus...
by elbear on Friday February 09, 2024 @03:47AM
(#39312784)
Controversial opinion: Redux (and the Elm architecture behind it) only works with a typed language like TypeScript (or Elm) which takes away the error-prone part. With good type completion, some of the "pretty tedious" part goes away as well.
[ Parent
| on HN ]
Re:React has grown beyond its original promise and it's caus...
by cageface on Friday February 09, 2024 @03:54AM
(#39312843)
Yeah strong typing is essential. Redux is overkill for small or even medium apps but it's the best tool I've found for dealing with the complexity of larger apps. Having a very clear, inspectable sequence of mutations to all your data becomes very valuable.
Re:React has grown beyond its original promise and it's caus...
by agos on Friday February 09, 2024 @03:51AM
(#39312824)
even with completion it's a lot of busywork: define actions, reducers, etc for every state change
Re:React has grown beyond its original promise and it's caus...
by pseudocomposer on Friday February 09, 2024 @06:25AM
(#39313740)
If you use TypeScript and Thunk, it’s no more work than writing your own state management code on plain JS/TS objects. But you get all the advantages of Redux (dev tools, introspection, replayability, easy persistence and tab sync, etc).
Re:React has grown beyond its original promise and it's caus...
by hombre_fatal on Friday February 09, 2024 @09:22AM
(#39315099)
You're probably right about Elm which is basically one big reducer, but Redux adds a whole lot more indirection on top of that which makes it much more complicated.
Even small Redux apps can start off with a lot of indirection as soon as they extract logic into selectors. This is probably the first area where Redux becomes more complex that what you were doing before:
https://redux.js.org/usage/deriving-data-selectors
It reminds me of reading a bunch of parser combinators: it feels like you're reading code that builds something that does what you want instead of the code that just does what you want.
const makeSelectItemsByCategory = () => {
const selectItemsByCategory = createSelector(
[state => state.items, (state, category) => category],
(items, category) => items.filter(item => item.category === category)
)
return selectItemsByCategory
}