pass dynamic values in API params coming from navigation in react native - reactjs

Question

I got following 2 values in id and company variable by navigating the screen.
useEffect(() => {
if (props.route && props.route.params) {
console.log("id-->", props.route.params.oved);
console.log("company-->", props.route.params.company);
}
});
e,g i got 2 values like this
id--> 31
company--> 465
I want to pass the id and company value in API params.
api.js : -
const AllFormCardAPI = () => {
const [formAllAPIData, setAllFormAPIData] = useState("");
//NOTE: retrieving loginAuthToken from store
const loginAuthToken = useSelector(
(state) => state.loginAuthTokenReducer.loginAuthToken
);
useEffect(() => {
axios
.get(GET_ALL_FORM, {
//TODO: take parameters from user data currently parameters are static
params: {
company: "984",
employee: "38887683",
DisplayRow: "123456",
},
headers: {
Authorization: `Bearer ${loginAuthToken}`,
},
})
.then((response) => response.data)
.then((data) => setAllFormAPIData(data))
.catch((error) => {
if (error.status === 401) {
//NOTE: handling token expire
return ExpireAlertRestart();
} else {
Alert.alert(error.message);
}
})
.finally(() => console.log("finally block all form api", formAllAPIData));
}, []);
};
i want to pass those 2 values i,e id and company from navigation which I mentioned above and those has to be passed as string to following in API params.
My new API params should look like this. The id value should replace in employee params and company value should replace in company params.
params: {
company: "465",
employee: "31",
action.js:--
import { CHANGE_SELECTED_COMPANY } from "./action-constants";
export const changeCompany = (updatedCompany, updatedId) => {
return {
type: CHANGE_SELECTED_COMPANY,
updatedCompany,
updatedId,
};
};
reducer.js:--
import { CHANGE_SELECTED_COMPANY } from "../actions/action-constants";
const initialState = {
company: "",
id: "",
};
const changeCompanyReducer = (state = initialState, action) => {
switch (action.type) {
case CHANGE_SELECTED_COMPANY:
return {
company: {
company: action.updatedCompany,
id: action.updatedId,
},
};
}
return state;
};
export default changeCompanyReducer;
congigure-store.js:--
import changeCompanyReducer from "./reducers/change-company-reducer";
const rootReducer = combineReducers({changeCompanyReducer});
How can i store the update values getting from navigation in Redux?
could you please write code for redux??

Answer 1

const AllFormCardAPI = (props) => {
//New lines
const id = props?.route?.params?.oved;
const company = props?.route?.params?.company;
//New lines end
const [formAllAPIData, setAllFormAPIData] = useState("");
//NOTE: retrieving loginAuthToken from store
const loginAuthToken = useSelector(
(state) => state.loginAuthTokenReducer.loginAuthToken
);
useEffect(() => {
axios
.get(GET_ALL_FORM, {
//TODO: take parameters from user data currently parameters are static
params: {
company: company,
employee: id,
DisplayRow: "123456",
},
headers: {
Authorization: `Bearer ${loginAuthToken}`,
},
})
.then((response) => response.data)
.then((data) => setAllFormAPIData(data))
.catch((error) => {
if (error.status === 401) {
//NOTE: handling token expire
return ExpireAlertRestart();
} else {
Alert.alert(error.message);
}
})
.finally(() => console.log("finally block all form api", formAllAPIData));
}, []);
};