Reducing Redux Boilerplate in TypeScript

https://warhol.io/blog/reducing-redux-boilerplate-in-typescript

by sir_pepe • 7 years ago

2 2 7 years ago

drublic• 7 years ago

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/

acemarke• 7 years ago

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

Reducing Redux Boilerplate in TypeScript

Related Stories