Redux: Proper way to access state from web service?

Viewed 1321

I have outlined a few ways to possibly access state from the web service, but I do not know which one is the proper one in a react-redux app, or if the proper one is even listed below.

Context:

Originally, I had an API.js file which acted as a base for web services. I would then import this into my action files. This went well until I needed to access the state (more specifically, a web token in the state that I needed for my header) from API.js. I tried to import my store, but it returned undefined. I then realized I had a circular dependency:

api -> store -> reducers -> components -> actions

Custom Middleware


I was wondering if this is acceptable. I ditched my API.js. I use this to automatically modify outgoing network calls that have a specific action type. This is what my middleware stack looks like:

const middleware = applyMiddleware(
    myCustomModifyRequestMiddleware,
    thunk,
    . . .

And myCustomModifyRequestMiddleware basically looks like:

 const myCustomModifyRequestMiddleware = store => next => action {
     if(action.type === 'MODIFY_ME') {

         //Dispatch an FSA
         store.dispatch({
             type: action.payload.actual_type,
             payload: axios.create({ . . .
             meta: action.meta
         })
     }

     return next(action)
 }

Now I have business logic inside my middleware!

Then I could just have an action creator named API_ActionCreator. But hey, if I was just going to use an action creator why not just...

Thunk it


Using thunks I could probably just have something like API_ActionCreator.js:

const apiActionCreator = (actual_type, url, data . . .) {
    return (dispatch, store) {
        //Now I can get the state...
        store.getState()

        //Return an FSA
        return { 
            type: actual_type,
            payload: axios.create...

Now I can import my API_ActionCreator into my actions without any circular dependencies.

Subscribing to the store ?

Another way would be to have the web service be stateful; subscribe to the store in store or the web service, if I could somehow avoid running into a circular dependency when I called my web services inside my actions.

TLDR; Of course, this is all experimental, though I was able to get the middleware working.

I don't know which one is the most viable approach, is there maybe a more redux-ish way to do this?

2 Answers
Related