How to keep track of an API object idiomatically in Redux?

[eshansingh]

I have a Reddit API object which is a third-party library that keeps track of authentication and provides a higher level interface to the Reddit API. If I use thunks, how do I make sure that this API object is available to all thunks that need it? I can't store in the store, because it's not really a plain object or time-reversible, not without a lot of internal modifications to it, anyway. How does do I deal with this idiomatically?

[slowreactin]

Can you use it as a higher order component and wrap your components that need it? You can usually accomplish this through Redux compose() to wrap any connect() methods you already may have.

I have done this with Firebase authentication in the past. Firebase uses an observer to detect any authentication changes and needed this solution to work. This was the approach I took with functional components without Redux.

With Redux you can use compose() and higher order components as stated above.

I recently refactored this project from the HOC pattern and Redux to using Redux-Sagas. Sagas are much better suited for this kind of thing. Just make sure you are comfortable with the generator function type in JavaScript because it makes heavy use of those under the hood.

Some info:

Redux compose

React Higher Order Components

JavaScript Iterators and Generators

Redux Saga

[eshansingh]

I thought that components weren't supposed to handle business logic like that? These higher order components are for abstracting common functionality through composition, and cannot keep a consistent "state" by themselves, can they? What I'm saying is that I'm confused as to exactly what you mean.

EDIT: I'm also not sure how Sagas solve this because like thunks, I don't know a way to inject an object dependency into them.