SolidJS•4mo ago

[Solved] Change store object using reconcile

I am not sure if I am using the api wrongly. But my case is very simple I am trying to build a filexplorer component and I have the following code.

6 Replies

MobsOP•4mo ago

function FileExplorer(props: Props) {
    const [components, setComponents] = createStore(["/"]);
    const [current, setCurrent] = createStore<Record<string, any>>({});

    const [directories, setDirectories] = createStore<Record<string, any>>({});
    const [files, setFiles] = createStore<Record<string, string>>({});

    onMount(() => {
        setCurrent(props.fs);
        loadData();
    });

    function loadData() {
        const dirs: typeof directories = {};
        const fls: typeof files = {};
        for (const key in current) {
            const item = current[key];
            if (typeof item === "object") {
                dirs[key] = item;
            } else {
                fls[key] = item;
            }
        }
        setDirectories(dirs);
        setFiles(fls);
    }

    function intoDir(name: string) {
        setCurrent((prev) => prev[name]);
        setComponents((prev) => [...prev, name, "/"]);
        loadData();
    }

    return (
        <div>
            <p>{components.join("")}</p>
            <For each={Object.entries(directories)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={true}
                        value={value}
                        onClick={() => intoDir(name)}
                    />
                )}
            </For>
            <For each={Object.entries(files)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={false}
                        value={value}
                        onClick={() => {}}
                    />
                )}
            </For>
        </div>
    );
}

function FileExplorer(props: Props) {
    const [components, setComponents] = createStore(["/"]);
    const [current, setCurrent] = createStore<Record<string, any>>({});

    const [directories, setDirectories] = createStore<Record<string, any>>({});
    const [files, setFiles] = createStore<Record<string, string>>({});

    onMount(() => {
        setCurrent(props.fs);
        loadData();
    });

    function loadData() {
        const dirs: typeof directories = {};
        const fls: typeof files = {};
        for (const key in current) {
            const item = current[key];
            if (typeof item === "object") {
                dirs[key] = item;
            } else {
                fls[key] = item;
            }
        }
        setDirectories(dirs);
        setFiles(fls);
    }

    function intoDir(name: string) {
        setCurrent((prev) => prev[name]);
        setComponents((prev) => [...prev, name, "/"]);
        loadData();
    }

    return (
        <div>
            <p>{components.join("")}</p>
            <For each={Object.entries(directories)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={true}
                        value={value}
                        onClick={() => intoDir(name)}
                    />
                )}
            </For>
            <For each={Object.entries(files)}>
                {([name, value]) => (
                    <FileItem
                        name={name}
                        isDirectory={false}
                        value={value}
                        onClick={() => {}}
                    />
                )}
            </For>
        </div>
    );
}

When the intoDir function is called the current store object is not replaced with the new object, rather it for some reason is merging both objects which I am having a hard time understanding. My input to this component fs is simply an Object with string keys and values that are string or another Object signifying a directory

MobsOP•4mo ago

Initially (i have clicked the test directory) it should just become { a: "...", b: "...", c: "..."}

MobsOP•4mo ago

What is happening

MobsOP•4mo ago

I have tried deep copying, shallow copying it doesnt help I tried to set the store to an empty object which for some reason didn't do anything looking at the code there are really no side effects that is causing that state to change either

Brendonovich•4mo ago

From the docs:

When using store setters to modify objects, if a new value is an object, it will be shallow merged with the existing value

To completely replace a store, wrap the value in reconcile

MobsOP•4mo ago

Okay, that solves it Thanks!

Gaming

Programming

[Solved] Change store object using reconcile