useEffect trigger twice when slice Pattern，I don't want the first trigger

[felix9ia]

shopPage.ts triggers useEffect twice. The defaultShopInfo outputted by the first trigger is wrong, which is what I don't want to happen. The second trigger is correct, and it is the page that triggers syncShopInfo. How can I avoid the first trigger?

Log Output:

createShopSlice============
useShopAdminStore===========
createShopSlice============
syncShopInfo============
shopInfo: defaultShopInfo  // I don't want this trigger
shopInfo: fromServer

shopPage.ts

  useEffect(() => {
    console.log("shopInfo: ", shopInfo)
    if (shopInfo.shopNo) {
      changeSwiperIndex()
      changeNotice()
    }
  }, [shopInfo]);

shopStore.ts

export interface ShopStoreState {
  shopInfo: ShopInfo;
  syncShopInfo: (shopNo: string) => Promise<void>;
  resetShopStore: () => void
}

const shopState: {
  shopInfo: ShopInfo,
} = {
  shopInfo: defaultShopInfo,
}

export const  createShopSlice: StateCreator<ShopStoreState> = (set) => {
  console.log("createShopSlice============")
  return {
    ...shopState,
    syncShopInfo: async (shopNo) => {
      const existShopInfo = await fetchShopInfo({shopNo})
      if (existShopInfo) {
        set(() => ({
          shopInfo: existShopInfo
        }))
      }
    },
    resetShopStore: () => {
      set({...shopState})
    }
  }
}


const useShopStore = create<ShopStoreState>(createShopSlice);
export default useShopStore;

shopAdminStore.ts

export interface ShopAdminStoreState {
  modifyShopInfo: (shopInfo: ShopInfo, updateToServer: boolean) => Promise<void>
}

export const createShopAdminSlice: StateCreator<
  ShopStoreState & ShopAdminStoreState,
  [],
  [],
  ShopAdminStoreState
> = (set, get) => ({
  modifyShopInfo: async (modifiedShopInfo, updateToServer = false) => {
    const {shopInfo} = get()
    modifiedShopInfo.shopNo = shopInfo.shopNo
    if (updateToServer) {
      const updatedInfo = await updateShopInfo({shopInfo: modifiedShopInfo})
      if (updatedInfo) {
        set({
          shopInfo: updatedInfo
        })
        await Taro.showToast({title: "店铺信息更新成功", icon: "none"});
      } else {
        await Taro.showToast({title: "店铺信息更新失败", icon: "none"});
      }
    }
  }
})

const useShopAdminStore = create<ShopStoreState & ShopAdminStoreState>()((...a) => {
  console.log("useShopAdminStore===========")
  return {
    ...createShopSlice(...a),
    ...createShopAdminSlice(...a),
  }
})

export default useShopAdminStore;

[dbritto-dev]

@felix9ia that's how works React, useEffect is a way to sync your data with something else. BTW, you can use subscribe() trigger something when something else change

[felix9ia]

Thank you for replying me so quickly. I hope it’s not a problem with the way I write slice. I can only think of other solutions.

[dbritto-dev]

@felix9ia seems what you want to do is like subscribing to state changes so in that case I'd use useShopAdminStore.subscribe() + useEffect with no deps

[dbritto-dev]

here you go -> https://zustand.docs.pmnd.rs/apis/create#subscribing-to-state-updates

[felix9ia]

@dbritto-dev Thank you very much, I used subscribe to solve this problem. To do this, I modified the context of changeSwiperIndex() and changeNotice() from directly relying on the store's shopInfo to relying on the parameter shopInfo.

  useEffect(() => {
    const unsubscribeShopAdminStore = useShopAdminStore.subscribe(
      ({shopInfo: updatedShopInfo}) => {
        changeSwiperIndex(updatedShopInfo)
        changeNotice(updatedShopInfo)
      }
    )
    return () => {
      unsubscribeShopAdminStore()
    }
  }, []);

However, from the logic of my code, the defining of shopState in the store should not trigger useEffect。I can't figure it out...

const shopState: {
  shopInfo: ShopInfo,
} = {
  shopInfo: defaultShopInfo,
}

export const  createShopSlice: StateCreator<ShopStoreState> = (set) => {
  return {
    ...shopState,   // I am just defining the object here, why does the effect get triggered?
    ...others
}
const useShopStore = create<ShopStoreState>(createShopSlice);
export default useShopStore;

[dbritto-dev]

@felix9ia that's how works useEffect doesn't not only run when something change you could test it out with this:

const [count] = useState(0)

useEffect(() => {
  console.log({ count })
}, [])