I am dispatching a function like the following:
ChartHandlePureFunc.js:
export function getBasic() {
return async (dispatch) => {
const response = await axios.get
`https://financialmodelingprep.com/api/v3/historical-price-full/AAPL?apikey=*********`;
dispatch(changeValue(response.data));
};
}
ChartHandler.js:
useEffect(() => {
if (!req) {
dispatch(getBasic());
}
}, [req]);
The above code works and the only thing I am trying to change is for getBasic to be able to take an argument and be dispatched like the following:
export function getBasic(userInput) {
return async (dispatch) => {
const response = await axios.get(`https://financialmodelingprep.com/api/v3/historical-price-full/${userInput}?apikey=*********`);
dispatch(changeValue(response.data));
};
}
And then in my other components useEffect:
useEffect(() => {
if (!req) {
dispatch(getBasic('AAPL'));
}
}, [req]);
Since the argument is only getting used in the getBasic function I believe this is all the code required for the problem, I have also tried having userInput next to dispatch like:
return async (dispatch, userInput) => {
...
};
And have tried that with both userInput still being in the getBasic argument and without.
Edit:
console.log(userInput) when userInput is in the getBasis arg like: getBasic(userInput)
I get AAPL, the correct result in console, but if I move it down to return async (dispatch, userInput)
I then get
ƒ i() {
var e,
r = (e =
t.getState()).computedStates[e.currentStateIndex].state;
return void 0 !== r && (n = r), n;
}
in console
CodePudding user response:
You can take the param and make a template string like this:
export function getBasic(userInput) {
const requestUrl = `https://financialmodelingprep.com/api/v3/historical-price-full/${userInput}?apikey=*********`;
return async (dispatch) => {
const response = await axios.get(requestUrl);
dispatch(changeValue(response.data));
};
}