how to dnymic computed ?

[uinz]

How to transform the following redux code with valtio?

interface Todo {
  id: string;
  title: string;
  active: boolean;
  createdAt: number;
}

interface RootState {
  [scope: string]: Record<string, Todo>;
}

Suppose I have the above data structure

I want to get active Todos using the dynamic scope field

The implementation code using redux is as follows, and bailout can be implemented by shallowEqual

const UseRedux: FC<{ scope: string }> = ({ scope }) => {
  const selector = useCallback(
    (state) => {
      const todos = state[scope];
      return Object.values(todos)
        .filter((item) => item.active)
        .map((item) => item.id);
    },
    [id]
  );

  const activeIds = useSelector(selector, shallowEqual);

  return (
    <ul>
      {activeIds.map((id) => (
        <Item id={id} />
      ))}
    </ul>
  );
};

I don't know how to achieve the above effect in valtio,
Below is a scenario of my implementation, although it works. But I want to look for a more elegant way of coding

const rootState = proxy<RootState>({});

const UseValtio: FC<{ scope: string }> = ({ scope }) => {
  const derived = useMemo(() => {
    const selector = (state: RootState) => {
      const todos = state[scope];
      return Object.values(todos)
        .filter((item) => item.active)
        .map((item) => item.id);
    };

    return derive({
      activeIds: (get) => selector(get(rootState)),
    });
  }, [scope]);

  const activeIds = useSnapshot(derived).activeIds;

  return (
    <ul>
      {activeIds.map((id) => (
        <Item id={id} />
      ))}
    </ul>
  );
};

[dai-shi]

It depends on your goal, but I would simply do this:

const UseValtio: FC<{ scope: string }> = ({ scope }) => {
  const todos = useSnapshot(rootState[scope]);
  const activeIds = Object.values(todos)
    .filter((item) => item.active)
    .map((item) => item.id);

  return (
    <ul>
      {activeIds.map((id) => (
        <Item id={id} />
      ))}
    </ul>
  );
};

But, you probably concern some extra re-renders?

[DennisSmolek]

Check this example: https://codesandbox.io/s/valtio-mapping-objects-using-arrays-better-schema-for-child-items-mbew5
I sort, style, and filter based on various properties.

[uinz]

Yes. in redux, I can use isEqualFn option and reselect lib avoid extra re-render.

I want to know how to achieve the same ability in valtio.

[dai-shi]

If you want more control manually, check this out: https://github.com/pmndrs/valtio/wiki/How-to-avoid-rerenders-manually#subscribe-and-set-local-state-conditionally

[uinz]

thanks