5 tips for projects on react + redux

These are 5 techniques that I use to develop projects on react + redux. Explain on the example of YouTube Meta.

Attention! The entire article is based on the code sitting in the repository 27 Jan 2019

1. kebab-case instead of camelCase

Operating systems work differently with the case in file names. Windows has a case-insensitive file system, Linux does not. This leads to problems, for example: we are working on Windows and rename the file Data.json to data.json, and change imports:

From:

import data from './Data.json'

To:

import data from './data.json'

Commit and push changes to the server. Another developer with Linux pull changes and when running it has an import error. Because Git on Windows did not see that we renamed the file. I met this problem on project Pokedex in e56635 and decided to 7eebc6.

Tip: if you encounter this problem, run git mv -f <source> <destination>

Also kebab-case is easier to read, because the words are separated by a hyphen, not glued together, as in camelCase.

2. There is no folder for components and containers

Instead of the popular approach of using components and containers folders, files have cmp- and cnt- prefixes, respectively. A file is a self-contained unit and it's cool when we can understand the content by its name.

Thanks to this approach, I almost stopped accessing the file system and began to use a quick transition to files in VS Code.

3. Simplified data normalization in the reducers

Despite the fact that YouTube Meta is a simple application, data normalization has great potential in the future, and now we can use a simplified version of caching. More details about normalization can be found in the official redux documentation.

From myself I will add: the reducer has a collection field inside which we store entities using their id as a key. This allows us to read and delete data in O(1) time.

4. redux-api-middleware for working with API

If you use a bunch of react and redux, the best way to access the API from middleware. You can write to middleware yourself or use a ready-made solution. I'm using redux-api-middleware because it uses Flux Standard Action and very flexible.

5. Containers without JSX

The container is where we work with the data, and because we use redux to store the data, the container has a simple task: to export connect and describe its arguments. This approach helps to navigate the project: if I need to work on the interface - I go to the component, and if the data, I go to the container.

These solutions came with experience, and I can not imagine any of my project without at least a few of the above solutions.