I have an action which will take quite some time to complete. It will be looping through an array with over 250k entries. With each entry it will be doing some logic. I want to inform the user of the actions progress, which would be:
let progress = (i / array.length) * 100
How can I add this to redux store or components state so that I can communicate the current progress in the UI?
I tried dispatching an action (as you can see below) which updates the stores progress with the current iterator but the reducer only executes when the for loop is created.
export const generateKeyMap = (mapFrom, mapTo) => {
return async (dispatch) => {
await dispatch(startGeneration()); <-- This only runs when I use a setTimeout for the following action.
setTimeout(() => {
dispatch(buildKeyMap(mapFrom, mapTo));
}, 100);
};
};
export const buildKeyMap = (mapFrom, mapTo) => {
return async (dispatch) => {
let keyMap = {};
for (let i = 0; i < mapFrom.length; i++) {
await dispatch(reportProgress(i)); // <-- This does not update in store until for loop is done.
let randomIndex = randomIntFromInterval(0, mapTo.length - 1);
let key = mapFrom[i].toString();
let value = mapTo[randomIndex].toString();
Object.assign(keyMap, { [key]: value });
mapTo.splice(randomIndex, 1);
}
await dispatch(stopGeneration());
return { type: actionTypes.DELIVERKEYMAP, payload: keyMap };
}
};
Related
so I made a notification system with react and redux and added a queue system for preventing to display to much notifications at the same time. It works how it should, but there is only one problem. If add 5 notifications the fifth one should go inside the queue array it does but the components do not relaize that the queue array has now a length of one. If i put again 5 notifications i have 4 on the active array and then 2 notifications inside the queue array, from here it knows that queue array length is now 2. Why is that? Is there a problem with the re-rendering?
My Code:
const notify = useSelector((state) => state.notify);
const handleClick = () => {
let notification = {
iconType: 0,
title: 'notification.title',
message: 'notification.message',
color: '03A65A',
width: 0,
};
showNotifications(notification);
};
const timeoutNotification = async (notification: any) => {
await dispatch(AddActiveItem(notification));
setTimeout(async () => {
await dispatch(RemoveActiveItem(notification.id));
if (notify.queue.length && notify.active.length < 4) {
let newQueue = notify.queue;
let pushItem = newQueue.shift();
await dispatch(SetNewQueue(newQueue));
timeoutNotification(pushItem);
}
}, 120 * notification.message.length);
};
const showNotifications = async (notification: any) => {
notification = {
id: notify.id,
iconType: notification.iconType,
title: notification.title,
message: notification.message,
color: notification.color,
width: notification.width,
};
let newId = notify.id + 1;
dispatch(SetId(newId));
if (notify.active.length > 3) {
await dispatch(AddQueueItem(notification));
} else {
timeoutNotification(notification);
}
};
Remember that Redux's dispatch is an async function, so the changes made to the Redux state are not visible immediately. If you're sure the state should/will update, simply await the changes..
I am using React and I do not understand why in the useEffect when running a map function the second part of the code runs before the first part (which is a promise resolve).
Shouldn't the parser wait for the promise to resolve and then run the second part of the code?
useEffect(() => {
const pools = mainnet.Exchanges.Pancakeswap.LpTokens.map((lpPool) => {
// part 1
const [tokenZeroSymbol, tokenOneSymbol] = lpPool.name.replace(' LP', '').split('-');
const prices = fetchTokenPrice(tokenZeroSymbol.toLowerCase(), tokenOneSymbol.toLowerCase());
Promise.resolve(prices).then((values) => {
const [priceTokenZero, priceTokenOne] = values;
filteredFarmPools.find((pool) => {
if (lpPool.name.replace(' LP', '') === pool.name) {
pool.priceTokenZero = values[0].usd;
pool.priceTokenOne = values[1].usd;
}
console.log('inside the fethcprice promise');
});
});
// part 2
filteredFarmPools.find((pool) => {
if (lpPool.name.replace(' LP', '') === pool.name) {
const tvl0 = (pool.reserveTokenZero / 10 ** 18) * pool.priceTokenZero;
const tvl1 = (pool.reserveTokenOne / 10 ** 18) * pool.priceTokenOne;
pool.tvl = tvl0 + tvl1;
}
console.log('inside the tvl calc');
});
});
No.
Promises give you an object that you can pass around and call then on.
They do not turn asynchronous code into blocking code.
The second part of the code isn't inside the then callback so it runs while the asynchronous code (that will trigger the first promise to resolve) is running in the background.
That said, see the await keyword for asyntax that can give the illusion that a promise is blocking.
useEffect(() => {
const processPools = async () => {
for (let lpPool of mainnet.Exchanges.Pancakeswap.LpTokens) {
const [tokenZeroSymbol, tokenOneSymbol] = lpPool.name.replace(' LP', '').split('-');
const values = await fetchTokenPrice(tokenZeroSymbol.toLowerCase(), tokenOneSymbol.toLowerCase());
// Promise.resolve(prices).then((values) => {
const [priceTokenZero, priceTokenOne] = values;
filteredFarmPools.find((pool) => {
if (lpPool.name.replace(' LP', '') === pool.name) {
pool.priceTokenZero = values[0].usd;
pool.priceTokenOne = values[1].usd;
}
console.log('inside the fethcprice promise');
// });
});
}
}
processPools();
});
Original Array.map does not support async
Promise.resolve return immediately, no difference with Promise.then
I am trying to set state to my setStockInfo hook and wait for the for it to be set before I run props.onInitialSet(). I tried passing setStockInfo as a dependency in the useEffect, but getting no luck. I need the information from stockInfo before I set to the global store. Is there a way I can use a callback since useState doesn't return a promise? The error returning is "cannot read property symbol of undefined" from the props.initialSet()
function TopStocks(props) {
const [stockInfo, setStockInfo] = useState([]);
const symbols = ["AAPL", "NFLX", "GOOGL", "TSLA"];
let temp = [];
useEffect(() => {
fetchSymbols();
props.onInitialSet(
stockInfo[2].symbol,
stockInfo[2].percentage,
stockInfo[2].close
);
}, [setStockInfo]);
async function fetchSymbols() {
for (let i = 0; i < symbols.length; i++) {
await fetch(
`api${symbols[i]}`
)
.then((res) => res.json())
.then((allStocks) => {
console.log(allStocks);
try {
let metaDataEntries = allStocks["Meta Data"];
let symbol = metaDataEntries["2. Symbol"].toUpperCase();
let pastDataEntries = allStocks["Time Series (Daily)"];
let pastDataValues = Object.values(pastDataEntries);
let mostRecentValue = pastDataValues[0];
let x = Object.values(mostRecentValue);
let open = parseFloat(x[0]).toFixed(2);
let high = parseFloat(x[1]).toFixed(2);
let low = parseFloat(x[2]).toFixed(2);
let close = parseFloat(x[3]).toFixed(2);
let colorToSend;
let percentage = close - open;
if (percentage < 0) {
colorToSend = "red";
} else {
colorToSend = "rgb(30, 216, 139)";
}
let result = parseFloat(percentage).toFixed(2);
temp.push({
symbol: symbol,
high: high,
low: low,
close: close,
open: open,
percentage: result,
color: colorToSend,
});
} catch {
console.log("surpassed the limit of 4 requests in under a minute");
}
});
}
setStockInfo(temp);
}
}
const mapDispatchToProps = (dispatch) => {
return {
onInitialSet: (symbol, percentage, price) => {
dispatch({
type: "INITIALSET",
value: {
price: price,
symbol: symbol,
percentage: percentage,
},
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TopStocks);
stockInfo is the value that will change, not the state setter. Inside the useEffect, check to see if the array has been populated:
// Run once, on mount:
useEffect(fetchSymbols, []);
// Run after fetchSymbols finishes:
useEffect(() => {
if (stockInfo.length) {
props.onInitialSet(
stockInfo[2].symbol,
stockInfo[2].percentage,
stockInfo[2].close
);
}
}, [stockInfo]);
You should also put a try/catch around the await fetch so you can catch possible network errors.
Given that useEffect runs after every render, the fetched stockInfo is not reflected until after the current rendering process.
Thus, stockInfo is undefined when passed to onInitialSet.
To solve this, follow the Single Responsibility Principle by simply splitting to two effects:
First effect is to fetch symbols
Set initial set
const [stockInfo, setStockInfo] = useState([]);
// First effect: to fetch
useEffect(async () => {
let temp;
for (let i = 0; i < symbols.length; i++) {
await fetch(`api${symbols[i]}`);
// TODO: add rest of code
}
setStockInfo(temp);
}, []);
// 2nd effect: call onInitialSet
useEffect(() => {
if (stockInfo.length === 0) {
return;
}
props.onInitialSet(
stockInfo[2].symbol,
stockInfo[2].percentage,
stockInfo[2].close
);
}, [stockInfo]);
Despite looking and following numerous answers here at stackoverflow,I have still failed to refactor this code to abide by the ESLint no-loop-func.
I keep getting the following warning, despite my efforts to refactor the code:
Compiled with warnings.
Function declared in a loop contains unsafe references to variable(s) 'lastResult', 'biologyBooks', 'page' no-loop-func
Here's the code:
import React from 'react';
import { apiFullCall } from '../../apiHelper';
const MyComponent = props => {
const [state, setState] = React.useState({ total: 0, biologyBooksByAuthor: [] });
let isLoaded = React.useRef(true);
const token = sessionStorage.getItem('token');
const authorID = sessionStorage.getItem('author_id');
const getBooks = async() => { // fetch items
let page = 1;
let scienceBooks, biologyBooks;
// create empty arrays to store book objects for each loop
let scienceBooks = biologyBooks = [];
// create a lastResult object to help check if there is a next page
let lastResult = { next: null };
do { // the looping - this is what I have failed to refactor
try {
await apiFullCall( // Make API calls over paginated records
'',
token,
'get',
`books/?author_id=1&page=${page}`
).then(res => {
if (res) {
const { status, body } = res;
if (status === 200 || status === 201) {
lastResult = body; // assign lastResult to pick "next"
body &&
body.results &&
body.results.map(eachBook => { // we map() over the returned "results" array
// the author with queried "author_id" writes science books;
// so we add each book (an object) into the science category
scienceBooks.push(eachBook);
// We then filter the author's biology books (from other science books)
biologyBooks = scienceBooks.filter(
({ is_biology }) =>
typeof(is_biology) === "boolean" && is_biology === true
);
return null;
}
);
// increment the page with 1 on each loop
page++;
}
}
}).catch(error => console.error('Error while fetching data:', error));
} catch (err) { console.error(`Oops, something went wrong ${err}`); }
// keep running until there's no next page
} while (lastResult.next !== null);
// update the state
setState(prevState => ({
...prevState, total: scienceBooks.length, biologyBooksByAuthor: biologyBooks,
}));
};
React.useEffect(() => { // fetch science books by author (logged in)
if (isLoaded && authorID) {
getBooks();
};
return function cleanup() {...}; // clean up API call, on unmount
}, [isLoaded, authorID]);
return (
// render the JSX code
);
}
Please note that I actually declared the said variables lastResult, biologyBooks and page outside the "do-while".
Any help or clues will be greatly appreciated.
The function the warning is referring to is the .then callback, if you're using async/await stick to it, try removing the .then part by assigning the result to a variable instead and remove the unnecessary .map, you can concatenate previous results with spread operator or .concat.
import React from 'react';
import { apiFullCall } from '../../apiHelper';
const MyComponent = props => {
const [state, setState] = React.useState({
total: 0,
scienceBooksByAuthor: [],
});
const isLoaded = React.useRef(true);
const token = sessionStorage.getItem('token');
const authorID = sessionStorage.getItem('author_id');
const getBooks = async () => {
// fetch items
let page = 1;
let scienceBooks = [];
// create a lastResult object to help check if there is a next page
let lastResult = { next: null };
do {
// the looping - this is what I have failed to refactor
try {
const res = await apiFullCall(
// Make API calls over paginated records
'',
token,
'get',
`books/?author_id=1&page=${page}`,
);
if (res) {
const { status, body } = res;
if (status === 200 || status === 201) {
lastResult = body; // assign lastResult to pick "next"
// concatenate new results
scienceBooks = [
...scienceBooks,
...((lastResult && lastResult.results) || []),
];
// increment the page with 1 on each loop
page += 1;
}
}
} catch (err) {
console.error(`Oops, something went wrong ${err}`);
}
// keep running until there's no next page
} while (lastResult.next !== null);
const biologyBooks = scienceBooks.filter(
({ is_biology }) =>
typeof is_biology === 'boolean' && is_biology === true,
);
// update the state
setState(prevState => ({
...prevState,
total: scienceBooks.length,
scienceBooksByAuthor: scienceBooks,
}));
};
React.useEffect(() => {
// fetch science books by author (logged in)
if (isLoaded && authorID) {
getBooks();
}
return function cleanup() {...}; // clean up API call, on unmount
}, [isLoaded, authorID]);
return (
// render the JSX code
);
};
I have an action that will take quite some time to complete. I want to inform the users that the action is currently taking place. To do this I am dispatching an action that updates a reducers state with a boolean.
The issue I am running into is that the larger action starts before the the state is updated. As a result, when a users clicks the generate button, they then experience the system lagging appose to UI informing them to wait.
How can I ensure the first action startGeneration() is completed before buildKeyMap() starts? Same questioned for reportProgress(). I have redux-thunk installed.
export const generateKeyMap = (mapFrom, mapTo) => {
return async (dispatch) => {
dispatch(startGeneration()), // <-- this updates reducers state with a boolean, generatingMap: true
dispatch(buildKeyMap(mapFrom, mapTo)) // <-- this takes a long time to finish
};
};
export const buildKeyMap = (mapFrom, mapTo) => {
return async (dispatch) => {
let keyMap = {};
for (let i = 0; i < mapFrom.length; i++) {
dispatch(reportProgress(i)); // <-- would like this to finish before moving on in the loop
let randomIndex = randomIntFromInterval(0, mapTo.length - 1);
let key = mapFrom[i].toString();
let value = mapTo[randomIndex].toString();
Object.assign(keyMap, { [key]: value });
mapTo.splice(randomIndex, 1);
}
dispatch(stopGeneration()); // <--- Would like this to finish before delivering the map
return { type: actionTypes.DELIVERKEYMAP, payload: keyMap };
};
};
export const startGeneration = () => {
return { type: actionTypes.STARTKEYMAPGENERATION };
};