Passing fetched data to store and changing it issue

[smashboy]

Hello everyone! I'm fetching data from react-query for my list and then I pass it to my useFilterCollectionsStore that has empty array where filtered items will be placed. The issue is that my component is not getting updated filtered list when I try to filter data and save it to the store.

Store:

export const useFilterCollectionsStore = <S>(
  queryData: GetCollectionListItem[],
  selector: StateSelector<UseFilterCollectionsStore, S>
) =>
  create<UseFilterCollectionsStore>((set) => ({
    collections: [],
    filter: (matchFilter) =>
      set((state) => {
        console.log(state, queryData); // actually gets udpated, but not in list component
        return {
          collections: queryData.filter(({ name }) => textMatchFilter(name, matchFilter)),
        };
      }),
  }))(selector);

List component:

const filteredCollections = useFilterCollectionsStore(
    collections && collections.length > 0 ? collections : [],
    (state) => state.collections
  );

  useEffect(() => {
    // Is getting updated only, when data from react-query is changing
    // But is not getting updated, when I call filter() from useFilterCollectionsStore
    console.log(filteredCollections);
  }, [filteredCollections]);

[dai-shi]

Please try to create outside render, not inside the custom hook.

[smashboy]

Why I cant do that?

[dai-shi]

It will create a fresh store every time and nothing is stored.

[smashboy]

Thanks, I finally figured it out.

[dai-shi]

You are welcome. Great you figured out with just two tiny comments. 😄

Maybe, you want to leave a comment how you solved it so that others who come here can learn it?

[smashboy]

Yeah sure. My issue what that I didnt understand how create() works. So I had to wrap the result of the create() function which is a hook, not the function itself in a custom hook and change state of the store there.

Store

const useStore = create<UseFilterCollectionsStore>((set) => ({
  collections: [],
  filter: (matchFilter, collections) =>
    set(() => ({
      collections: collections.filter(({ name }) => textMatchFilter(name, matchFilter)),
    })),
}));

export const useFilterCollectionsStore = <S>(
  selector: StateSelector<UseFilterCollectionsStore, S>,
  queryData?: GetCollectionListItem[]
) => {
  useEffect(() => {
    if (queryData) {
      useStore.setState({ collections: queryData });
    }
  }, [queryData]);
  return useStore(selector);
};

List component

const collectionsList = useMemo(
    () => (collections && collections.length > 0 ? collections : []),
    [collections]
  );

const filterCollections = useFilterCollectionsStore((state) => state.filter, collectionsList);