Destructuring assignment with useStoreState does not trigger re-render

[Jamie Hutber]

I have been seeing odd behaviour that my page will not re-render when states changes, however if I call them directly and do not destructure the assignments they will re-render.

Using NextJS with easy-peasy.

Store

import { action } from 'easy-peasy'

const initialValues = {
  navSearchType: 'search',
}

export const search = {
  ...initialValues,
  changeSearchType: action((state, payload) => {
    state.navSearchType = payload
  }),
}

Component

// re-renders correctly when an action is executed 
export const Home = () => {
  const navSearchType = useStoreState(state => state.search.navSearchType)

  console.info({ navSearchType }) //search
  changeSearchType('something')
  console.info({ navSearchType }) //something

// Does not re-render when action is executed
export const Home = () => {
  const { navSearchType } = useStoreState(state => state.search)

  console.info({ navSearchType }) //search
  changeSearchType('something')
  console.info({ navSearchType }) //search

[Sean Matheson]

Hi @hutber

This is very strange and I can't think why this would happen.

I would appreciate it if you could create a minimal reproduction within CodeSandbox so that I can investigate.

Thanks 🙏

[Jamie Hutber]

Thanks @ctrlplusb. It is very interesting. I will need to try to replicate ye. As it does seem to be somebody local with my copy. I am wondering if its anything to do with hotreloading or nextjs that is playing up. As it actually does work sometimes and other times not. I should work out which/how/why and when really. So I guess ignore this I do not get back to you :)

[Sean Matheson]

If it is any consolation, I am using Next.js myself and have not been experiencing anything untoward as of yet. :)

Please do let me know if you are able to reproduce. Closing for now.