Почему нет доступа к стору?

Question

[art style]

store.js

import {useLocalObservable} from "mobx-react-lite";

function chatStore() {
    return {
        chatmsg: [],
        setChatMsg(arr) {
            this.chatmsg = arr
        },
        addChatMsg(msg) {
            this.chatmsg.push(msg)
        }
    }
}

export const useChatStore = () => useLocalObservable(chatStore)

app.js

const App = () => {

    const chatMsgStore = useChatStore()

    const AppFunctions = {chatMsgStore}

    useEffect(() => {
        console.log(chatMsgStore.chatmsg)
    }, [chatMsgStore.chatmsg])
 // лог постоянно пустой, показывает массив из 0

    return (
        <>
           <AppContext.Provider value={AppFunctions}>
.....................................................
           </AppContext.Provider>
        </>
    )
}


export default App;

кастомный хук
fetch.js

async function getChatMessages(url, body, userStore, chatMsgStore) {
........
            chatMsgStore.setChatMsg(firstResData)
........

кастомный хук который даже не лежит внутри App получает этот стор и chatMsgStore.setChatMsg(firstResData)
отрабатывает нормально, и глубоко внутри App компонент ре-рендерится, и сообщения появляются
но почему я не могу в App использовать те же значения и функции из стора и они всегда равны 0 ?
если в App я вызову addChatMsg(msg) ничего не произойдет ... ?

Answer 1

[Alexandroppolus]

App не помечен как observer, потому не перерендеривается при изменении chatMsgStore.chatmsg, и его useEffect срабатывает только один раз, в начале.
Про addChatMsg(msg) не понял вопроса.

Comments

[art style]

блин упростил пример в ущерб себе
вот реальный пример

const App = () => {

    const chatMsgStore = useChatStore()

    const AppFunctions = {chatMsgStore}

    useEffect(() => {
        socket.on(activechat.chatid, (bdmsg) => {

            chatMsgStore.addChatMsg(bdmsg)

        })
        return () => {
            socket.off(activechat.chatid)
        }
    }, [activechat, chatMsgStore.chatmsg])

    return (
        <>
           <AppContext.Provider value={AppFunctions}>
.....................................................
           </AppContext.Provider>
        </>
    )
}


export default App;

при загрузке срабатывает юзэффект и вешается слушатель сокета при этом chatMsgStore.addChatMsg(bdmsg) просто функция которая добавляет сообщение и компонент глубоко внутри app помеченный как observer должен ре-рендерится, но этого не происходит?
при этом зависимости юзэффекта
activechat - не из стора
chatMsgStore.chatmsg - из стора
и срабатывать он должен при изменении обоих стейтов
как заставить это работать вместе с useeffect?