Use actions inside different slices of state

[ChechurinSerhiy]

Hello everyone

Is it possible to somehow use actions inside different slices or should I only use them at the top level?
so that I can create for each piece, a function with the same name

I am using react-native.

below is an example of what I would like

store/index.js

import AsyncStorage from '@react-native-async-storage/async-storage';
import create from 'zustand';
import produce from 'immer';
import { persist } from 'zustand/middleware';
import slice1 from './slice1';
import slice2 from './slice2';

const STORAGE_NAME = 'unique-storage';

export const useStore = create(
  persist(
    (set, get) => ({
      ...slice1(set, get),
      ...slice2(set, get),
    }),
    {
      name: STORAGE_NAME,
      getStorage: () => AsyncStorage,
    },
  ),
);

store/slice1.js

import produce from 'immer';

const slice1 = (set, get) => ({
  slice1: {
    prop: false,
    setProp: (bool) => // this function will be removed and hence undefined
      set(
        produce(state => {
          state.slice1.prop = bool;
        }),
      ),
  },
});

export default slice1;

store/slice2.js

import produce from 'immer';

const slice2 = (set, get) => ({
  slice2: {
    prop: false,
    setProp: (bool) => // this function will be removed and hence undefined
      set(
        produce(state => {
          state.slice2.prop = bool;
        }),
      ),
  },
});

export default slice2;

[dai-shi]

You are free to have functions in slices as long as you care not to delete those functions.
Looks like you are using immer's produce, so it should be safe.

For more context: #178

[ChechurinSerhiy]

when I output the store to the console, I see

{
  slice1: {
    prop: false
  },
  slice2: {
    prop: false
  }
}

everything except setProp functions in each slice

but they weren't removed until I started using persist middleware

[dai-shi]

Oh, I see. You may need to specify merge option to persist in such cases...