Updating State - "Best Practice" Question

Hi, have a quesioin regarding reusing state update logic. I want my state update logic to be in the store only, where the state + actions are, and i’m looking for a “best practice” of reusing a function that updates part of the state, in Mobx State Tree, for example, the store is built of smaller parts that i can reuse in different places. is it possible to do it in zustand?

MST ex:

// reusable logic part
const Todo = types
    .model("Todo", {
        title: types.string,
        done: false
    })
    .actions(self => ({
        toggle() {
            self.done = !self.done
        }
    }))

// using the reusable update logic
const Store = types.model("Store", {
    todos: types.array(Todo)
})

[dai-shi]

zustand is basically unopinionated, but it’s easy if you have actions right under the state because the default behavior of set is shallow merging.

Now, if I’d try something you would expect, it’d be:

const createTodo = (set) => ({
  title: '',
  done: false,
  setTitle: (title) => set({ title }),
  toggle: () => set(prev => ({ done: !prev.done }),
})

const createStore = create((set) => ({
  todos: {},
  addTodo: () => {
    const id = nanoid()
    const setTodo = (update) => {
      set(prev => {
        if (typeof update === 'function') {
          update = update(prev.todos[id])
        }
        return { todos: { ...prev.todos, [id]: { ...prev.todos[id], ...update } } }
      })
    }
    const todo = createTodo(setTodo)
    set(prev => ({ todos: { ...prev.todos, [id]: todo }))
  }
})

…but, I don’t think this is something you really expect.

[feuersteiner]

@dai-shi the problem that rises from putting actions in a store is a very long file sometimes that is not easy to ready, even though putting controllers in separate files with custom hooks can be cumbersome, it still guarantees readability.