Avoid Duplicating Calls for Stable Data I’m currently experimenting with as a service to provide data that can be edited and updated without triggering a whole new testing/deployment cycle. Since I’m syndicating my Redux store to local storage, I’m trying to figure out a pattern where I don’t re-request this data more than every [x], where [x] could be a time limit anywhere from milliseconds to days. Contentful For the purposes of this example I’m using to allow me to do async actions. Redux-Thunk Actions The first part will be the actions allowed in my reducer. : the action we’ll run if the cache is “fresh” Abort : store the error for whatever use required (this action could be a hook to connect external logging) Error : Set to for any kind of user notification of an async process. Start isFetching true : Set the returned data as the value. Update Synchronous Action Creators The action creators are the functions that will get dispatched over the lifecycle of the async action. Async Action Creator This is the function that will get exported to a component and called from a lifecycle hook wherever the fetch needs to be initiated. The internal actions will get dispatched in sequence over the lifecycle of the async call. Reducer and InitialState The reducer handles all the synchronous actions dispatched over the lifecycle of the async function, as well as handling setting the and values. You could easily move that bit of logic to the action creators and avoid having any side effects in your reducer (pure function). isFetching lastFetched Conclusion There you have it. Assuming you’re syndicating your Redux store to local storage, you can avoid a bunch of unnecessary API requests If you’ve got a better pattern (or know a library that solves this problem more elegantly) leave me a comment. I know for a fact there’s a typo or two between the gists, but they don’t obscure the logic. Related Posts _Iterate with Object.keys() and drop byId_medium.com Redux Patterns: Rethinking `byId` and `byHash` Structures _I wrote a post the other day about how to implement a Redux-flavored store and reducer in a single React component…_medium.com Redux Patterns: Add/Edit/Remove Objects in an Array _I’m currently working on a project where I’m patching a few React components piecemeal into an existing ASP.NET build…_medium.com Implement Redux as Vanilla JS in a Single React Component

BUNCH

Fetch

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Redux Patterns: Caching an API Response

Too Long; Didn't Read

Companies Mentioned

Justin Tulk

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Redux Patterns: Caching an API Response

Too Long; Didn't Read

Companies Mentioned

Justin Tulk

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES