when I get data from another store in one store, it is not the latest data

[Ali-ovo]

I have two stores

// input store    src/store/input.ts
interface IStore {
  inputValue: string;
  setInputValue: (value: string) => void;
}

const useInputStore = create<IStore>()(
  immer(
    devtools((set) => ({
      inputValue: '',
      setInputValue: (value: string) => {
        set((state) => {
          state.inputValue = value;
        });
      },
    })),
  ),
);
export default useInputStore;



// main store  src/store/index.ts
interface IStore {
  count: number;
  inputValue: string;
  increment: () => void;
  decrement: () => void;
  setInputValue: (value: string) => void;
}

const useStore = create<IStore>()(
  devtools((set) => ({
    count: 0,
    inputValue: useInputStore.getState().inputValue,  // form input store
    setInputValue: useInputStore.getState().setInputValue,   // form input store
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
  })),
);

export default useStore;

When I use themain store method to modify the inputValue, the page does not display the new data

import { FC } from 'react';
import useStore from '@/store';  // from main store

const Card: FC = () => {
  const inputValue = useStore((storeState) => storeState.inputValue);

  return (
    <div>
      <h3>inputValue: {inputValue}</h3>  // It will never be updated here
    </div>
  );
};
export default Card;

How can I get the latest inputValue data

[dbritto-dev]

@Ali-ovo why not get them directly from useInputStore? if you want to get access data and functions the right way to do it is by not using them directly but by wrapping them in functions like this:

const useStore = create<Store>()(
  devtools((set) => ({
    count: 0,
    getInputValue: () => useInputStore.getState().inputValue,  // form input store
    setInputValue: (inputValue) => useInputStore.getState().setInputValue(inputValue),   // form input store
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
  })),
);

then you can use them like this:

const Card = () => {
  const getInputValue = useStore((storeState) => storeState.getInputValue);
  const inputValue = getInputValue()

  return (
    <div>
      <h3>inputValue: {inputValue}</h3>  // It will never be updated here
    </div>
  );
};

[Ali-ovo]

thank you for your reply， but this does not work，

I can't get the latest data using getInputValue , InputValue cannot get the latest data

since it is allowed to access the data of another store through one store, but it is wrong now

[dbritto-dev]

thank you for your reply， but this does not work，

I can't get the latest data using getInputValue , InputValue cannot get the latest data

since it is allowed to access the data of another store through one store, but it is wrong now

Yeah, that's expected because getState is not reactive. If you want the latest you should get it from useInputStore if you want to split your store in multiple states you can use slices pattern

[Ali-ovo]

ohh ， getState is not reactive, i understand. thank you