from Hacker News

Reducing Redux Boilerplate in TypeScript

by sir_pepe on 10/28/19, 3:34 PM with 2 comments

  • by acemarke on 10/28/19, 3:57 PM

    Hi, I'm a Redux maintainer.

    There's a much better solution than what this blog describes. We've just released a new package called Redux Starter Kit [0], which is meant to provide opinionated defaults and simplify writing common Redux code patterns. It's already written in TypeScript, and works great in TS apps.

    In particular, the `createSlice` function [1] allows you to provide reducer functions that use "mutative" update logic (thanks to using the Immer library [2] internally), and auto-generates action types and action creators based on the provided reducers. Really, there's no reason to write an action creator or action type by hand ever again. `createSlice` also makes it really easy to organize your Redux logic using the single-file-per-feature "ducks" pattern [3]

    The "Advanced Tutorial" page [4] shows how to use RSK with TypeScript, and with our new React-Redux hooks.

    Going forward, Redux Starter Kit is our recommended way to use Redux.

    [0] https://redux-starter-kit.js.org/

    [1] https://redux-starter-kit.js.org/api/createSlice

    [2] https://immerjs.github.io/immer/docs/introduction

    [3] https://github.com/erikras/ducks-modular-redux

    [4] https://redux-starter-kit.js.org/tutorials/advanced-tutorial

  • by drublic on 10/28/19, 3:37 PM

    The concept of action types inferred from module types is something we use in Warhol’s code a lot. It also fits nicely with the architecture of Conceptual Components as I described in my blog post here: https://drublic.de/blog/conceptual-components/