Possible to translate a useReducer to Zustand?

I have a reducer:

const reducer = (state, action) => {

  switch (action.change) {
    case 'ROOT' :
      return {
        ...state,
        root: action.value
      }
    case 'QUALITY' :
      return {
        ...state,
        quality: action.value
      }
    case 'EXTENSION' :
      return {
        ...state,
        extension: action.value
      }
    case 'CHORD' :
      return {
        ...state,
        quality: action.value.split(`-`)[0],
        extension: action.value.split(`-`)[1]
      }
    case 'RESET' :
      return { 
        ...state,
        root: '',
        quality: '',
        extension: ''
      }
    default :
      return state
  }
}

…which is used in a react component utilizing the useReducer hook, like so:

const [{ root, quality, extension }, dispatch] = useReducer(
    reducer,
    {
      root: ( props.root || '' ),
      quality: ( props.quality || '' ),
      extension: ( props.extension || '' )
    }
  )

  const handleRootChange = event =>
    dispatch({ change: 'ROOT', value: event.target.value })

  const handleQualityChange = event =>
    dispatch({ change: 'QUALITY', value: event.target.value })

  const handleExtensionChange = event =>
    dispatch({ change: 'EXTENSION', value: event.target.value })

  const handleChordChange = event => {
    dispatch({ change: 'CHORD', value: event.target.value })
  }

  const handleReset = event =>
    dispatch({ change: 'RESET'})

  const notes = `${root}-${quality}-${extension}`

…soooo, can something like this be achieved using Zustand in a simper way?

[timkindberg]

If you wanted to stick with a reducer:

// Create Store
const useStore = create(set => ({
  root: '',
  quality: '',
  extension: ''
  dispatch: args => set(state => reducer(state, args)),
}))

// Usage in Component
const dispatch = useStore(state => state.dispatch)
dispatch({ change: 'ROOT', value: event.target.value })

If you wanted to do it more traditional zustand:

const useStore = create(set => ({ 
  root: '',
  quality: '',
  extension: '',
  actions: {
    changeRoot: root => set({ root }),
    changeQuality: quality => set({ quality }),
    changeExt: extension => set({ extension }),
    changeChord: chord => set({
        quality: chord.split(`-`)[0],
        extension: chord.split(`-`)[1]
    }),
    reset: () => set({ 
      root: '',
      quality: '',
      extension: ''
    })
  }
}))

// Usage
const root = useStore(s => s.root)
const actions = useStore(s => s.actions)
actions.changeRoot(...)

[dai-shi]

Closing this as stale. Please file a new issue with a repro. We would like to solve issues if there are any with Gatsby.