Please check out our new Redux Starter Kit package [0]. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once
The React-Redux hooks API [1] also requires less code that `connect`.
I just wrote a tutorial for RSK that shows how to use it with TypeScript, thunks for async, and React-Redux hooks [2].
(note this is not directed at redux, react-redux, or the wonderful redux-starter-kit library. I'm also a huge, huge fan of how createSlice combines action constants, action creators, and reducer handlers, all in one.)
Those react-redux hooks just exemplify the issues I have with hooks.
Yeah, potentially less code, but with more (and in some instances, completely unheard of) gotchas, more that the developer has to do to keep parity with not using hooks, and certain things dropped entirely.
I'm super interested in this discussion. I've been using React for years, and it's been smooth sailing. But somethings up with hooks, and I haven't been able to put it into words.
FWIW, the "stale props/zombie child" issues described in the React-Redux hooks docs [0] really have nothing to do with the hooks themselves. It's a combination of:
- The long-standing problem of trying to synchronize an external synchronous state container with React's async rendering cycle
- That our existing solution for this problem requires overriding values in context for connected components
- The fact that context usage _require_ rendering a <Context.Provider> to update a value
- The fact that hooks themselves do not do any rendering
So, the solution we have for avoiding stale props only works with `connect`. It's not that the hooks themselves are problematic or have inherent gotchas, it's just that hooks don't offer the specific additional capability we would need to implement that same solution in both places.
A user just put together a _fantastic_ article that dives deeper into this specific problem, and recaps how each version of React-Redux tried to solve it [1]. Highly recommended reading if you have some time.
The React-Redux hooks API [1] also requires less code that `connect`.
I just wrote a tutorial for RSK that shows how to use it with TypeScript, thunks for async, and React-Redux hooks [2].
[0] https://redux-starter-kit.js.org/
[1] https://react-redux.js.org/api/hooks
[2] https://redux-starter-kit.js.org/tutorials/advanced-tutorial