I have this component that fetches some data from an open API and I am trying to render the data in <LeadsTable leads={myDataState} />
component. The problem is that in development mode, it fetches and updates the state, but in production build it never dispatches getCurrentLeads()
function. Below is my react component:
export const SomePage = () => {
const dispatch = useDispatch();
const myData = useSelector(({ myDataStore }) => myDataStore.leads)
const [myDataState, setMyDataState] = useState([]);
useEffect(() => {
dispatch(getCurrentLeads('api/leads/'));
setMyDataState(myData)
}, [dispatch, myData]);
return (
<Fragment>
<Navbar />
<PageTitle pageTitle={'My Page'} />
<LeadsTable leads={myDataState} />
<Footer footerClass={'footer'} />
<Scrollbar />
</Fragment>
)
};
This is my leads reducer:
const initialState = {
leads: [],
}
export const leadsReducer = (state = initialState, action) => {
switch (action.type) {
case GET_CURRENT_LEADS: return { ...state, leads: action.payload }
default: return state
}
}
And this is my action:
export const getCurrentLeads = (url) => async (dispatch) => {
try {
const myLeads = await leadsService.getCurrentLeads(url)
dispatch(getCurrentLeadsSuccess(myLeads))
} catch (err) {
console.log(err)
}
}
const getCurrentLeadsSuccess = (leads) => ({
type: GET_CURRENT_LEADS,
payload: leads
})
I suspect it has something to do with the lifecycle of react components, and I would greatly appreciate if you explain why this behaviour or provide some link where I can read in further detail.