Is it a good idea to send http requests from redux-thunk middleware even if this http request doesn't modify the store?
Here is some code explaing what I mean:
export const CONFIRM_UPLOAD_REQUEST = 'CONFIRM_UPLOAD_REQUEST';
export const CONFIRM_UPLOAD_SUCCESS = 'CONFIRM_UPLOAD_SUCCESS';
export const CONFIRM_UPLOAD_FAILURE = 'CONFIRM_UPLOAD_FAILURE';
function _confirmUpload() {
return {
[CALL_API]: {
types: [CONFIRM_UPLOAD_REQUEST, CONFIRM_UPLOAD_SUCCESS, CONFIRM_UPLOAD_FAILURE],
requestMethod: 'POST',
endpoint: `upload/confirm`
}
};
}
export function confirmUpload() {
return (dispatch) => dispatch(_confirmUpload());
}
When I send this action, my middleware will execute POST upload/confirm request. It will not modify the store (so I don't have a reducer for CONFIRM_UPLOAD_SUCCESS).
The question: how bad is this approach? Must I execute http request directly (not via middleware)?
Answering on my own question, yes it's bad practice because the component will be re-rendered even if its properties were not changed
Related
I'm playing around with reactQuery in a little demo app you can see in this repo. The app calls this mock API.
I'm stuck on a an issue where I'm using the useQuery hook to call this function in a product API file:
export const getAllProducts = async (): Promise<Product[]> => {
const productEndPoint = 'http://localhost:5000/api/product';
const { data } = await axios.get(productEndPoint);
return data as Array<Product>;
};
In my ProductTable component I then call this function using:
const { data } = useQuery('products', getAllProducts);
I'm finding the call to the API does get made, and the data is returned. but the table in the grid is always empty.
If I debug I'm seeing the data object returned by useQuery is undefined.
The web request does successfully complete and I can see the data being returned in the network tab under requests in the browser.
I'm suspecting its the way the getAllProducts is structured perhaps or an async await issue but can't quite figure it out.
Can anyone suggest where IO may be going wrong please?
Simply use like this
At first data is undefined so mapping undefined data gives you a error so we have to use isLoading and if isLoading is true we wont render or map data till then and after isLoading becomes false then we can render or return data.
export const getAllProducts = async (): Promise<Product[]> => {
const productEndPoint = 'http://localhost:5000/api/product';
const res= await axios.get(productEndPoint);
return res.data as Array<Product>;
};
const { data:products , isLoading } = useQuery('products', getAllProducts);
if(isLoading){
return <FallBackView />
}
return (){
products.map(item => item)
}
I have managed to get this working. For the benefits of others ill share my learnings:
I made a few small changes starting with my api function. Changing the function to the following:
export const getAllProducts = async (): Promise<Product[]> => {
const response = await axios.get(`api/product`, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
return response.data as Product[];
};
I do not de-construct the response of the axios call but rather take the data object from it and return is as an Product[]
Then second thing I then changed was in my ProductTable component. Here I told useQuery which type of response to expect by changing the call to :
const { data } = useQuery<Product[], Error>('products', getAllProducts);
Lastly, a rookie mistake on my part: because I was using a mock api in a docker container running on localhost and calling it using http://localhost:5000/api/product I was getting the all to well known network error:
localhost has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...
So to get around that for the purpose of this exercise I just added a property to the packages.json file: "proxy":"http://localhost:5000",
This has now successfully allowed fetching of the data as I would expect it.
I have created a common js file to call the service requests. I want to store the fetched data in my redux managed store. But I am getting this error saying Invalid hook call. Hooks can only be called inside of the body of a function component.I think this is because I am not using react-native boilerplate for this file. But the problem is I don't want to I just want to make service requests and responses.
import { useDispatch } from "react-redux";
import { addToken } from "../redux/actions/actions";
const { default: Axios } = require("axios");
const dispatch = useDispatch();
const handleResponse=(response, jsonResponse)=> {
// const dispatch = useDispatch(); //-----also tried using dispatch here
const jsonRes = jsonResponse;
const { status } = response;
const { errors } = Object.assign({}, jsonRes);
const resp = {
status,
body: jsonResponse,
errors,
headers: response.headers,
};
console.log(resp, 'handle response');
return await dispatch(addToken(resp.body.token))
};
const API = {
makePostRequest(token) {
Axios({
url: URL,
...req,
timeout: 30000
}).then(res =>
console.log('going to handle');
await handleResponse(res, res.data)
})
}
export default API
I know there would be some easy way around but I don't know it
Do not use useDispatch from react-redux, but dispatch from redux.
You need to use redux-thunk in your application.
Look at the example in this article Redux Thunk Explained with Examples
The article has also an example of how to use redux with asynchronous calls (axios requests in your case).
I suggest to refactored your api to differentiate two things:
fetcher - it will call your api, e.g. by axios and return data in Promise.
redux action creator (thunk, see the example in the article) - it will (optionally) dispatch REQUEST_STARTED then will call your fetcher and finally will dispatch (REQUEST_SUCCESS/REQUEST_FAILURE) actions.
The latter redux action creator you will call in your react component, where you will dispatch it (e.g. with use of useDispatch)
I have a situation that I need to send two params in my post requests using axios to all my endpoints. These parameters are already in my store.
So, I create a "middleware" to procede all my requests like so:
const POST = async (url, body = {}) => {
const {Token, UserId} = store.getState().User
const {DeviceIdentifier} = await GetDeviceInfo()
const data = {AgentId: UserId, DeviceId: DeviceIdentifier, ...body}
const response = await axios.post(`${BASE_URL}${url}$`, data, {
headers: {Authorization: `Bearer ${Token}`},
})
if (!response.data.Logged) {
logoutUser()
return false
}
return response
}
But, I've been reading a lot of articles saying that using getState() like that is not a good idea...
What should be the best aproch in a situation like that?
Thank you so much!
When using redux thunk you can supply two arguments dispatch and getState. To supply more arguments:
const store = createStore(
reducer,
applyMiddleware(thunk.withExtraArgument({ url, body }))
)
// .withExtraArgument(url) // to supply further one arguments only
And then you can use getState like:
const POST = async (dispatch, getState, {url, body = {}}) => {
...
getState().User
Using getState() in a middleware is totally fine - that's why it's there!
If you'd like to read some extended discussion of some hypothetical concerns and my reasons why it's still okay, my post Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability goes into further details.
I have an React + redux + axios app, white jwt authentication. So, i need to intercept every request to server and set header with token. The question is where I have to set this headers, or implement interceptors. (also, i need redux store in scope, to get tokens from store). My idea - implement it in the Index component. Is it right way?
I suggest you to set the header axios.defaults.headers.common.authorization. Take a look here Global axios defaults. If you need a working example, this public repo can help you out.
Why do you have to manually set the header. Can't you just store the JWT in a cookie and then the browser will forward it automatically for you. Just make sure you pass credentials: 'include' in your HTTP options.
create a redux-middleware to do these things.
Apart from acting like interceptor to add header token,
you also do request/response transformation.
Also,you can mention the next action to which you want to dispatch the result if you don't want to return the promise and result.
Middleware gives you a chance to get the store state and also fetch & dispatch other action
const apiInterceptor = store => next => action => {
if(action.type !== 'ajax') return next(action)
const state = store.getState();
state.token // get token here
//add this api check part in some other module.
if(action.api=='UPDATE_CLIENT')
{
method = 'post';
url = 'some url';
}
else
{
method = 'get';
url = 'other url';
}
fetch(url, {
method: method,
headers : 'add token here',
body: JSON.stringify(action.body())
})
.then(response => response.json())
.then(json => json)//either return result
//OR dispatch the result
.then(json => {
dispatch({type:action.next_action,payload : json})
})
}
Integrate the middleware with store.
import customMiddleware from './customMiddleware'
const store = createStore(
reducer,
applyMiddleware(customMiddleware)
)
I offer you to refer redux-thunk.
You must create api-wrapper-helper to inject to redux-thunk as extra argument, then access to api-wrapper-helper from redux actions.
api-wrapper-helper is a function that get url and method as argument and send request to api-server then return result. (you can set headers in this file)
For example you can see ApiClient.js of react-redux-universal-hot-example boilerplate.
This is an old post but its getting a few views, so something like this would work nicely and is easily testable.
apiclient.js
import axios from 'axios';
import { setRequestHeadersInterceptor } from './interceptors';
const apiClient = axios.create(
{
baseUrl: 'https://my.api.com',
timeout: 3000
});
apiClient.interceptors.request.use(setRequestHeadersInterceptor);
export default apiClient;
interceptors.js
export const setRequestHeadersInterceptor = config =>
{
// have each interceptor do one thing - Single Responsibility Principle
};
you should store your auth details in a httpOnly secure cookie, the transmission to/from the server will be automatic then
// Interceptor
axios.interceptors.response.use(function (response) {
// success case here
return response
}, function (error) {
// Global Error Handling here
// showErrorToaster(error['message']);
return Promise.reject(error.response.data)
})
So my scenario is like this:
I have 2 types of requests: "public" requests which don't require authorization information, and "authorized" requests which do.
For authorized requests, before actually sending every request I must put auth info into the header. After the request finishes, the new access token returned from the server should be saved into the state.
So a lot of my actions currently looks like this:
export const asyncAction = (id) => async (dispatch, getState) => {
const { auth } = getState()
const config = {
headers: {
"access-token": auth["access-token"],
"client": auth.client,
"uid": auth.uid
}
}
const request = await axios.get(`${API_URL}`, config)
dispatch({ type: UPDATE_USER_ACCESS_TOKEN, payload: request})
dispatch({ type: ANOTHER_ACTION, payload: request.data })
}
I did some research and there are 2 possible ways to do this: Axios interceptor, or write a Redux middleware.
I feel like Axios interceptor, at least for the response part, is not the best solution here as it is intended to just do something with the response data, while I need to dispatch another action after I complete updating the new access-token, and I don't want to export the store to manually dispatch my actions, which is an anti-pattern. (as I mentioned the flow is: putting auth info into headers => send request => if it succeeds, then save the new access-token to Redux store for later use, then dispatch other actions; if it fails, do some error handlings).
Then I found this lib but I think I'm too dumb to understand the documentation:
https://github.com/svrcekmichal/redux-axios-middleware
Can someone please give me an example of how to do this? Both using that lib and writing custom middleware from scratch are fine for me. Thanks!