Clean Up Redux Code with React-Redux Hooks

preducks, a React-Redux prototyping app (with an accompanying npm module) that generates boilerplate code using React-Redux hooks and TypeScript.

If you search “Redux hooks” on Google, you won’t find a lot of resources about the cool new React-Redux hooks API. What you will find are bunch of articles about how to use React hooks as a replacement for Redux and other state management libraries.

But this was never the point of hooks. React hooks were made to allow developers to write functional components that can do all the things we once needed class components for, like using state or lifecycle methods. React hooks improve the developer experience by optimizing the organization, maintainability, and readability of React code. They allow us to share logic between components without using complicated design patterns like render props or higher-order components, and they cut down on the dense boilerplate required by JavaScript classes. They don’t really add any new functionality to React; functional components using hooks can’t do anything that class components can’t. But they do allow us to write much cleaner code.

If these improvements make you feel comfortable with using React to manage your application state without an external library, go for it! But React hooks are by no means the death of state management libraries like Redux. In fact, React-Redux version 7.1.0, released in June 2019, provides developers with its own set of hooks, with methods like useSelector() and useDispatch()…