In the past, writing network-related code with Redux was often a tedious exercise. 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 access the data you just received. Furthermore, you would often duplicate the same 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. A few months ago, we decided to change the story.
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. It will also work out of the box with the bare minimum configuration, and provide sensible, easy-to-override defaults. Finally, it is incrementally adoptable and will play nicely with your existing Redux state.
Before: actions to retrieve a user based on their id (reducers and selectors left out for clarity purpose)
After: the same code, but with Redux-rest-easy
Redux-rest-easy allows developers to define resources, and to declare the actions that you can perform with them. The library will then generate your Redux code, with predictable input and output, backed up with rich documentation. With a little configuration, it will handle the storage of your data, making it available to you (exposing it via selectors), and avoiding unnecessary requests with a cache system.
Unlike most Redux apps, 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 its 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, from querying the cache to performing the request if needed and storing its result, or handling the error if any. Each one of them will inject metadata in your state, which will be useful to review which actions were performed 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 that you are going to fetch a resource by id, search the local cache for this id (in case it has already been retrieved), and return 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 you rely on Redux-rest-easy, you do not have to think about non-tested network boilerplate code. We already got it covered. We also put a lot of effort into 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 we 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 their work has greatly inspired us. If you run into any trouble, submit an issue and we will be happy to help you!