React & Redux Best Practices

Rafael Rozon
9 min readJul 28, 2019

Intro

This is a collection of thoughts, methods, and practices from myself and other people that I put together to help me, and hopefully other devs, to write clean, maintainable, and scalable front-end code in React and Redux, in particular.

This article is based on my own experiences developing in React and in a lot of reading I did on Medium and all over the internet about React and Redux best practices and project structure. My main focus here is on project structure and maintainability, not so much on components. Although I’ll say a thing or two about that.

I created a repo to illustrate the ideas discussed in this article: Moon React Boilerplate.

My intention is not to prescribe anything or to say that this is the best approach, it’s simply one possible approach among many. Hopefully, it’s useful for you ;)

TL;DR

  • One entity per file. Try to stick to this rule as much as possible
  • namespace redux actions
  • use factory functions or libraries (redux-actions, reduxsauce) to reduce boilerplate code
  • follow the Flux Standard Action spec
  • export all reducers for testing
  • one root route component
  • Link components are autogenerated from a configuration file
  • exploit the file system in your favour. You should find what you need by just looking the filenames
  • follow naming conventions
  • develop components in isolation, i.e., use Storybook, React Styleguidist…
  • don’t use libraries that rely on globals
  • use selectors extensively
  • each feature encapsulates everything related to its domain

Project Structure

The project was created using Create React App (CRA) and it looks like this:

Configuration

--

--