In the past, writing network-related code with Redux was often a tedious task. You would create plain and async actions to handle the request, save the result in the store with a reducer, and finally create selectors to query your store. Furthermore, you would often duplicate the same code and logic throughout your different actions, copying and pasting the same code. In fact, there is a thread on the redux repository which highlights the current issue with Redux's boilerplate.
Today, we are happy to introduce our solution. Redux-rest-easy is a library for React and React Native, which allows you to perform network requests without the boilerplate. Based on a per-resource configuration, it will generate reducers, actions, and selectors, all available instantly and without hassle. Redux-rest-easy works out of the box with the bare minimum configuration, and provides sensible, easy to override defaults for every feature.
Before :
After :
On the left, actions to retrieve a user based on their id (reducers and selectors left out for clarity purpose). On the right, the same code but with Redux-rest-easy.
Redux-rest-easy allows developers to define resources, and to declare the actions that can be performed with them. The library will then generate your Redux code, with predictable and documented input and output. With a little configuration, it will handle the storage of your data, making it available to you (via selectors), and avoiding unnecessary requests with a cache system.
Unlike most Redux app, Redux-rest-easy doesn't generate reducers for each resource. Instead, it has a fixed number of generic reducers, which will handle all the changes to the store. Therefore, you only need to import one top reducer to get your app going. We encourage you to normalize your state and have found that normalizr is an excellent fit with Redux-rest-easy, but you are free to use whatever works for you, and to shape your state as you please.
Actions follow a predictable path, verifying if there is some cached version available, and then performing the request and handling errors if there are any. Each one of them will inject metadata in your state, which will be useful to review which actions performed and in which order.
Finally, selectors provide a way to query the state, and will only recompute when needed (thanks to re-reselect), which means the props of your components won't change when the output stays the same.
With its built-in cache, Redux-rest-easy will let you configure a lifetime value for each resource, defining for how long the data will stay fresh, and whether it would be better to serve local cache instead of performing the request. It can, among other things, detect you are going to retrieve a resource by id, search the local cache for this id (in case it has already been retrieved), and serve the result right away.
As of today, Redux-rest-easy is available on npm and Github, so that it can be as useful to the community as it has been for us in the past months. Our goal has been to provide a reliable tool (following semantic versioning, tested with Jest and automatically released with CircleCI and semantic-release) so that you can rely on it to build compelling apps. As the majority of the code is tested, you don't have to worry about manually testing your reducers, actions, and selectors anymore. We also put a lot of effort in the documentation, so that it would be a breeze for developers to use and integrate it into their Redux apps.
We hope this approach will be of some use to you and are excited to see more and more people adopting it and use it in ways we couldn't have imagined! We would also like to thank Apollo-client, as we have been greatly inspired by their work. If you run into any trouble, submit an issue and we will be happy to help you!