Where to put network calls in a reaction application + abbreviation

Question

I am trying to get some thoughts that people will consider the best practices of how people organize network calls in their action + redux applications. I usually let my components make calls, receive data, and then transfer them to an action that will be reduced. Is this the best practice or is it better to separate the network from my components and place this logic somewhere else in the application, possibly in gearboxes?

Answer 1

The best place for network calls is in your action creators. However, you will need some middleware to make this work better. Take a look at the promise-middleware (in fact, I would suggest checking out the entire tutorial). If you use this middleware, you can have action creators that return a promise, and also have three types of actions: one for requesting, one for processing successful responses, and one for processing failed requests. Then you just listen to these 3 actions in your gearboxes.

So, with this middleware, you can create an action creator as follows:

function networkCall() { return { types: ['MAKE_REQUEST', 'REQUEST_SUCCESS', 'REQUEST_FAILURE'], promise: () => { return new Promise((resolve, reject) => { $.ajax({ url: 'example.com/api' type: 'GET' }); }) } } } 

Obviously, you are free to create your own middleware, but that should put you in the right direction.

Answer 2

I think this is one thing that has been done in Angular. You have all your network calls neatly placed in your services . This is easy to do in Redux.

The docs rightly assume that network calls are in your actions . I would put them in a separate place, you can call it "services." There you define all your constants, such as the URL of your API server, things related to authentication, etc. This will be the only place that will know about the implementation details of your network calls - which library you use (jQuery, axios, superagent, etc.).

Your action files will import the function from these services and call them. If you later decide to change your network library, you do not have to change your actions .

Answer 3

I pretty much follow the action pattern in the shortening tutorials for Async Actions . It makes sense for me to keep everything asynchronous in actions - both from components and from storage / gearboxes.

I also use Redux Crud to standardize actions related to network activities.

Answer 4

You could use API redux-api-middleware , redux-api-middleware or something of your own (it's not very difficult to write one ).

Then, for example, your action creators might return actions such as

 {type: 'API_GET', url: '/api/userList', nextType: 'USER_LIST'} 

... which will later be processed by middleware that will send the actual request and then send a new action, for example:

 {type: 'USER_LIST_FETCHED', status: 200, payload: [{id: 1, ...}, ...]} {type: 'USER_LIST_FAILED', status: 404, payload: {message: '...'}}