JSDoc & React
JSDoc is very versatile tool. It requires zero configurations and has great potential in places all over the World of JS. React is not an exception.
Before reading further, you might checkout articles JSDoc frequent patterns and Why JSDoc.
The code is available on github. You may jump right into it or follow along.
The app I’m using is created with create-react-app and has common dependencies such as redux, redux-act, redux-saga, recompose.
Contents
There are several places in React application where you may utilize types:
- Redux Actions
- Redux Reducers
- Component’s Props
- Redux Sagas — if used
Next, I will discuss every one of them separately. Let’s roll.
Actions
Redux-act is a great library for creating actions and reducers.
The key point — it has some build-in typing system, which we can re-use in JSDoc. It also makes action definition pretty compact.
Reducers
Previously defined typed actions will be helpful in reducer’s handlers showing the type of the payload
If we define the state type of specific reducer, its good idea to do the same with the state of the root reducer for later use in other places.
Props
Using JSDoc in React, I find it useful to create components with no logic at all(dummy ones). Such component just uses its props and doesn’t care where they come from. Then, you need to wrap your dummy component in smth that provides props, whether its connect or compose or your custom parent component.
Sagas
When using redux-saga, there are a list of situations, where you might need types:
- receive typed objects from async call.
- pass typed payload when calling action.
- get typed state from reducer.
Previous steps finished the overall picture beautifully.
