Usage of AJAX in Redux

[pankajpatel]

Hello All,

I am working on a project which involves the React+Redux+GraphQL(Apollo Tools) and Backend is HapiJS+Rest+GraphQL(Apollo)

I had created a PoC to see the feasibility of this tech combination (stack). It worked very well.

Though I was already halfway on the current project and had built the Auth system in basic REST API which can be seen at https://github.com/pankajpatel/heimdall; and other supporting system plugins like following to quickly make the REST APIs.

• https://github.com/pankajpatel/get-it-ready
• https://github.com/pankajpatel/hapi-quick-api-mongoose

Now the problem I am stuck with is that I want to use the Auth system with REST API and remaining system with GraphQL and struggling to get it up and running.

This is my first project with Redux; I had built the projects with Flux and calling the API was not much of the problem. I know that its easy here in Redux as well, but maybe I'm missing something because of which it is not working.

Thanks.

[pankajpatel]

For an update:

I came across an interesting article which covers the API calls in the Middleware
http://www.sohamkamani.com/blog/2016/06/05/redux-apis/

And this solved my problem.

Though I am still wondering, how to trigger redirects from the Redux reducers or the middleware.

Any suggestions?

[sohilpandya]

@pankajpatel have you had a chance to look at redux-thunk might be something worth investigating, can be of help when making API calls.

Apologies if you've already looked at it, just thought it might be something that may be of help to you. 😄

[tbtommyb]

Redux's simplicity kind of falls apart with async actions like API calls, IMO.

@pankajpatel as Sohil said redux-thunk is often used to handle API calls. You can see an example of how I used it here (at the bottom). I may not have done things correctly but it does work...

Triggering redirects from reducers would be an anti-pattern as they are meant to be pure functions. What I ended up doing was using redux-thunk to have a kind of 'master' action that makes the API calls and dispatches actions as it starts the request, receives a response, receives an error etc etc.

[pankajpatel]

@sohilpandya thanks for suggesting redux-think but redux-think already in the app as the react app has Apollo GraphQL tools and is registered through that.

So I tried adding normal reducers which return functions instead of Data with dispatch and getState as parameters; as suggested in the Redux's documentation. But as a matter of hard luck, couldn't figure out the reason of not firing up the AJAX request and subsequent actions with SUCCESS/FAILURE.

@tbtommyb The approach looks really good, thanks for suggesting. Though in the article http://www.sohamkamani.com/blog/2016/06/05/redux-apis/, it is suggested to create a middleware and I feel that the middleware approach suits best to app configuration which I am using.
As I can quickly enable/disable or separate from app as a different package; similar to the auth plugin for hapijs at backend

My primary motive is to have as flexible as possible plug-ability of app modules because app will expect to have new features in the near future so setting up core like that becomes mandatory. The app is a rewrite of existing monolith and became very hard to keep up with new requirements of feature modules.