Mark's Dev Blog

Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson
 Sponsor @markerikson

Practical Redux, Part 0: Introduction

Posted on
#redux #javascript

This is a post in the Practical Redux series.

First in a series covering Redux techniques based on my own experience

Intro 🔗︎

I've spent a lot of time learning about Redux, from many different sources. Much of my early learning came from reading the docs, searching for tutorials online, and lurking in the Reactiflux chat channels. As I grew more comfortable, I gained experience answering questions and doing research to help others in Reactiflux, Stack Overflow, and Reddit. In the course of maintaining my React/Redux links list and Redux addons catalog, I've tried to find in-depth articles that dive into some of the complexities and issues involved in building real-world applications, and libraries that help make writing Redux apps better. Finally, I've also pored through numerous issues and discussions in the Redux repo (and even more so now that I'm officially a Redux maintainer).

In addition to all that research, I've also spent much of the last year using Redux in my own application at work. As I've worked on that app, I've run into a variety of challenges, and I've developed a number of interesting tools and techniques in the process. Since I've learned so much from what others have written, I'd like to start giving back, and sharing what I've learned from my own experience.

This series of posts on "Practical Redux" will cover some of the tips, techniques, and concepts I've come up with while building my own application. Since I can't actually share the specific details of what I've built at work, I'll be making up example scenarios to help demonstrate the ideas. I'll be basing the examples on concepts from the Battletech game universe:

  • A Battlemech is a piloted walking robot, armed with various weapons like missiles, lasers, and autocannons. A Battlemech has one pilot.
  • There are different types of Battlemechs. Each type can have a different size and set of statistics, including what weapons and other equipment it carries.
  • Battlemechs are organized into groups of four mechs, called a "Lance". Three lances make up a "Company".

As the series progresses, I'm hoping to actually start building a small app to show off some of the examples in an actual working environment. The tentative plan is to build an application that tracks the pilots and mechs in a fictional combat force, like a miniature version of the existing MekHQ game campaign tracker application. These screenshots from MekHQ illustrate some of the concepts and UI that I'm aiming to imitate:

I definitely do not intend to seriously rebuild all of MekHQ's functionality, but it should serve as a useful inspiration and source of ideas to base my examples on.

The first couple posts will discuss ways to use the Redux-ORM library to help manage normalized state. From there, I hope to cover topics such as ways to manage "draft" data while editing items, building a treeview, form input handling, and more. I also plan to cover some non-Redux-specific topics as well.

Feedback is always appreciated, whether it be in the comments, on Twitter, in Reactiflux, or elsewhere!

This is a post in the Practical Redux series. Other posts in this series: