[Question] use with externalStore and get new state immediatley

I’m building a react-hook-form wizard and am trying to use the syncStores function. When submitting a form to go to the next page, the entire state disappears, even if I’m just returning the existing sessionStorage. Am I doing it right?

https://codesandbox.io/s/github/svict4/RHF-LSM-with-RR

It’s probably because I don’t know how to use the library properly, does anyone have a more concrete example of POSTing or GETing data from an endpoint for the transform function?

function log(store: any) {
  console.log('this function logs the store:', store);
}

function PostData(store: any) {
  console.log('this function will trigger an API call to post data'); // is this the best place to put it?
}

window.sessionStorage.setItem(
  'formData',
  '{"yourDetails": {"firstname": "bull", "lastname": "le", "addresses": [{"street": "street"}]}}',
);

const mergeStore = (sessionData: any, data: any) => merge(data, sessionData);

// where externalStoreData is provided from an API
const externalStoreData = {
  yourDetails: { firstname: 'sdfsdf', middlename: 'dfsdfsdf' },
};

createStore(
  {
    yourDetails,
  },
  {
    name: 'formData',
    middleWares: [log, PostData],
    syncStores: {
      externalStoreName: 'API',
      transform: ({ externalStoreData, currentStoreData }) => {
        // just returning the current store doesn't seem to work after submit?
        return JSON.parse(window.sessionStorage.formData);
      },
    },
  },
);

Also, after setting the data in an action, I’d like to get state of the new store, so that I can pass it to my react-router function and do some logic. But state contains the previous state before updating, what’s a better way of getting the new state?

  const onSubit = data => {
    action(data);
    console.log(state); // I want to access the NEW state after the update
    props.history.push('./result'); // so I can use it here
  };

[bluebill1049]

hey @svict4 that’s the part that i want to fix (currently at my work we have similar issue) we shouldn’t have to return GlobaState, but right now you have to… until i fix it. you can report an issue on it, i will sort it out over the weekend 👍

[bluebill1049]

hey @svict4 sync external store only happen once, which is when you app landed. for each action you may need to use middleware. I haven’t fully use middleware in our project at work just yet. feel free to try it and let me know if there is issue around it, i will try to patch it ASAP.