Recurrent React problems

Environment variables in React
Useful link: Environment variables

terminal
 REACT_APP_TEST_VAR=123 npm start

– variables are embedded during build time.
– only the variables that start with REACT_APP_are embedded in our app (when the application is made with CREATE REACT APP)

The component does not rerender on a state update:
1. Makje sure the reducer returns a copy of the state or work with immutable objects
2. If the state is a nested object, use clonedeep from lodash or an immutable object

Fetch does not reject a promise on Status code 400 or 500
fetch() will only reject a promise if the user is offline, or some unlikely networking error occurs, such a DNS lookup failure. In order to reject a promise in case of a status code different from 200, use a generic handleError function

Handler before the result is stringified

function handleErrors(response) {
function handleErrors(response) {
if (!response.ok) throw Error(response.statusText);
return response;
}


Handler after the result is stringified

function handleErrors(response) {
return response.json().then(result => {
if (result.errorMessage) {
throw result
}
return result
})


Fetch error handler

Promise handler is not being called on dispatch

1. Make sure the dispatch is being called and you do not call the action directly from the import

Async await in map/forEachfunctions

1. wrap the map-function in a await Promise.all(items.map(item => await doAsyncCall(item))
2. do NOT use forEach in an async call. Use for (let item in items){await doAsyncCall(item)}