I am a beginner to Zustand. I have a simple use case where there are parent, child components. In the child component, I am using Zustand to update the state, it is getting logged but not re-rendering, could someone please help?
This is the related sandbox – link
Edit: Not sure why sandbox is not loading, I have pasted the code below.
Child.tsx
import { shallow } from "zustand/shallow";
import useStore, { testType } from "./store";
const selector = (state: testType) => ({
type1: state.type1,
setValue: state.setValue,
});
export default () => {
const { type1, setValue } = useStore(selector, shallow);
return (
<input
value={type1.get("0")!.get("label")}
onChange={(e) => setValue("0", "label", e.target.value)}
/>
);
};
App.tsx
import Child from "./Child";
export default function Home() {
return <Child />;
}
store.ts
import create from "zustand";
export type testType = {
type1: Map<string, Map<string, any>>;
setValue: (key: string, mapKey: string, mapValue: any) => void;
};
const testMap = new Map([["label", "testValue"]]);
const testMap2 = new Map([["0", testMap]]);
const useStore = create<testType>((set, get) => ({
type1: testMap2,
setValue: (key: string, mapKey: string, mapValue: any) => {
const tempType1 = get().type1;
const specificType1 = tempType1.get(key);
specificType1!.set(mapKey, mapValue);
tempType1.set(key, specificType1!);
console.log(tempType1);
set({
type1: tempType1,
});
},
}));
export default useStore;