When I call an action, first time data is loaded perfectly fine. Component re-renders again and messes up the state.
Default State
menu_detail: { error: null, menu_id: 0, detail: {} }
Working State
menu_detail: { error: null, menu_id: 2, detail: { menu: { ... } }
After unexpected render
menu_detail: { }
My Code
const setMenuDetail = useStoreActions(actions => actions); const getMenuDetail = useStoreActions(actions => actions.menu_detail.getMenuDetail); const setMenuId = useStoreActions(actions => actions.menu_detail.setMenuId); const menu_id = useStoreState(state => state.menu_detail.menu_id); const menu = useStoreState(state => state.menu_detail.detail.menu); // const menu_option_categories = useStoreState(state => state.menu_detail.menu_detail.menu_option_categories); const { data } = props.location; React.useEffect(() => { setMenuId(parseInt(data)); getMenuDetail(); }, [menu]); ...
Advertisement
Answer
I Updated React.useEffect() to :
React.useEffect(() => { setMenuId(parseInt(data)); getMenuDetail(2); }, []);
Now it works.