SolidJS•13mo ago

Use Common Store in js file and edit it using file 1 then use it in file 2.

I have context.js file and it have following code.

export function createI18n(i18n) {
  const [store, setStore] = createStore({
    ...i18n,
    t: i18n.t.bind({}),
  });
  const updateStore = (i18n) => {
    setStore({
      ...i18n,
      t: i18n.t.bind({}),
    });
  };

  return [store, updateStore];
}

I have file1.jsx file and it use to edit it.

const [i18nStore, updateStore] = createI18n(i18next);

const handleOnChange = (lang) => {
    i18next.changeLanguage(lang).then(() => {
      updateStore(i18next);
      setTimeout(null, 10);
    });
  };

How can I access store in context.js file from file 2.jsx? I need useeffect to run function when change store in context.jsx.

createEffect(() => {
    console.log("Changed:", i18nStore.language);
  });

3 Replies

bigmistqke•13mo ago

if you want 1 global store, you would need to createI18n(i18next) once and then import/export i18nStore and updateStore wherever you need it (like a singleton) or pass it through context you could also in context.js write

  const [store, _setStore] = createStore({
    ...i18n,
    t: i18n.t.bind({}),
  });
  const setStore = (i18n) => {
    _setStore({
      ...i18n,
      t: i18n.t.bind({}),
    });
  };

  export {store, setStore};

  const [store, _setStore] = createStore({
    ...i18n,
    t: i18n.t.bind({}),
  });
  const setStore = (i18n) => {
    _setStore({
      ...i18n,
      t: i18n.t.bind({}),
    });
  };

  export {store, setStore};

that's what's called a singleton and then u can import store and setStore wherever you need it if you use ssr you can not use singleton bc you could end up sharing state between different visitors of your website with ssr you would createI18n in one of the root-components, and then pass it on to all the other components through context.

iNdra•13mo ago

Thank you very much for supporting me. really hepful. Actually I need to know basic understanding of SSR in JS or Node or whatever. Previous I use JQuary and PHP. I use PHP for fetch data and sometimes to add some data to HTML. What is actuary SSR in node or js or solidjs? only render DOM in server side before serve to browser? I am beginner in this reactive world. previously actually do DOM manipulation using vanilla JS or JQuary.

bigmistqke•13mo ago

only render DOM in server side before serve to browser

exactly instead of sending a blank page and then rendering out the app completely in the client it does 1 run of it on server so instead of a blank page you get the html of that first render data can also be fetched on the server so that's another round-trip saved by ssr there quite some parrallels w php effects do not do anything on the server, in fact there is no reactivity at all in solidjs in node i personally never really bothered with it tbh the bundles are so small w solid it loads pretty fast in csr (client-side rendered) solid-start has some more utility-functions to communicate with the server some rpc-type stuff, where you can call functions on the server as if they are just regular code (uses REST stuff under the hood) and filebased routing and some other goodies

Gaming

Programming

Use Common Store in js file and edit it using file 1 then use it in file 2.