How exactly to use and call extendActions() with shared actions between stores?

[alan-chen-la-478]

I'm having trouble understanding how to properly use extendActions() call. It might be me just not fully understand how ES6 modules works, but I can't wrap my head around. Hopefully someone can share some lights. Thanks.

helpers.js

import {createStore as createZustandStore} from 'zustand-x';
export const createStore = (name, defaultValues) => {
  const store = createZustandStore(name)(defaultValues);

  // I put all the shared action in here, such as "reset", "clear", "debug_print" etc...
  store.extendActions((set, get) => {
    customA: () => console.log('a'),
  });

  return store;
};

stores.js

import {createStore} from '~helpers.js';

// each store can of course extends its own actions
const MessageStore = createStore('messages', {
  messages: [],
}).extendActions((set, get) => ({
    customB: () => console.log('b'),
    customC: () => console.log('c'),
});

MessageStore.extendActions((set, get) => ({
  customD: () => console.log('d'),
});

export MessageStore;

somefile.js

import {Pressable, Text} from 'react-native';
import {MessageStore} from '~stores.js'

const SomeComponent = (props) => {

  const pressed = () => {
    console.log(MessageStore);
  }

  return <Pressable onPress={pressed}><Text>click me</Text></Pressable>
}

export SomeComponent;

This is a simplified version of my code, the console.log in somefile.js only includes "customB" and "customC". "customA" and "customD" as never available to call. Am i doing something wrong?

Thanks in advanced.