Дочерние компоненты не видят стор?

Question

[artstylee]

mobx-store.js

import {useLocalObservable} from 'mobx-react-lite'

function data() {
  return {
      array: [],
      updateArray(args){
        this.array = args
       }
  }
}

export const useMobxStore = () => useLocalObservable(data)

parent.js

import {useMobxStore} from 'blabla'

const ParentComponent({somevars}) {

      const {data} = useFetch(someVars) <--- fetching hook
      const mobxStore = useMobxStore()
      mobxStore.updateArray(data)
      console.log(mobxStore.array) <-----!!!! works!!

  return <ChildComponent />
}

childcomponent.js

import {useMobxStore} from 'blabla'

function ChildComponent() {

    const mobxStore = useMobxStore()
    console.log(mobxStore.array) <--------!!!!!!! EMPTY!!!

return null
}

песочница тут
https://codesandbox.io/s/react-17-forked-i11jjc?fi...

в дочернем компоненте не работает console.log(store.array, "array")
почему ?

Comments

[artstylee]

глянул свой старый проект, там я прокидываю чего через контекст. что-то фигня какаято, другие стейт менеджеры так не работают. зустанд например, просто дергаю хуки. это нормальное поведение ?

Answer 1

[Alexandroppolus]

У тебя в ParentComponent и в ChildComponent лежат разные экземпляры стора. Просто два разных независимых объекта.

Разберись, как работает useLocalObservable и в чем его философия. Должно попустить.