Mobx данные is undefined?

Question

[art style]

STORE

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

export function chatMsgStore() {
    let chatmessages = []
    function setChatmessages(msgsArr) {
        chatmessages = msgsArr
    }
    return {chatmessages, setChatmessages}
}

export const chatmsgstore = () => useLocalObservable(chatMsgStore)

прокидываю через контекст

import {chatmsgstore} from "./src/store/chatmessages";

const App = () => {
    const AppFunctions = {chatmsgstore}
    return (<>
            <AppContext.Provider value={AppFunctions}>
                ................................
            </AppContext.Provider>
        </>
    )
};

пытаюсь дернуть внутри другого компонента

export function ChatApp() {
    const {chatmsgstore} = useContext(AppContext)


    console.log(chatmsgstore.chatmessages) <------ undefined ???
    chatmsgstore.setChatmessages([123,123,123]) <------- undefined is not a function???

    return ...............
}

Comments

[Gary_Ihar]

А зачем использовать mobx и context одновременно? Или это чисто поэкспериментировать?

[Alexandroppolus]

Gary_Ihar, это правильный подход. Что смущает? Контекст - разновидность DI для Реакта.

[Gary_Ihar]

Alexandroppolus, ничего, просто спросил, почитаю про этот подход

[Gary_Ihar]

Alexandroppolus, не могу особо инфы найти. Опиши в кратце. Почему нужен контекст, если есть mobx . С примером если не тяжело

[Alexandroppolus]

Gary_Ihar, складывать что-то в контекст - распространенная практика. Вовсе необязательно это должно быть какое-то изменяемое значение. Многие известные библиотеки хранят в контексте постоянные объекты. Например, тот же редукс (точнее, пакет "react-redux") хранит свой стор, а react-router - экземпляр History. Точно так же и мобиксовые сторы вполне могут лежать в контексте.

Для чего это нужно? Да для того же, для чего и DI в целом: отложить резолв зависимостей на потом, уменьшив зацепленность между кусками кода. Архитектурная тема, в общем.

Answer 1

[Alexandroppolus]

export const chatmsgstore = () => useLocalObservable(chatMsgStore)

это заменить на

export const useChatMsgStore = () => useLocalObservable(chatMsgStore)

далее

import {useChatMsgStore} from "./src/store/chatmessages";

const App = () => {
    const chatmsgstore = useChatMsgStore();
    const AppFunctions = {chatmsgstore}
...

----
можно подстраховаться на случай перерендеров App и проследить, чтобы значение в контексте не менялось:

const App = () => {
    const chatmsgstore = useChatMsgStore();
    const AppFunctions = useMemo(() => ({chatmsgstore}), [chatmsgstore]);

Comments

[art style]

сработало, не подскажешь почему теперь я в функцию пытаюсь прокинуть массив

function setChatmessages(msgsArr) {
        chatmessages = msgsArr
    }

а оно по прежнему равно нулю ?

[Alexandroppolus]

art style, да, тут тоже надо поправить

export function chatMsgStore() {
    return {
        chatmessages: [],
        setChatmessages(msgsArr) {
            this.chatmessages = msgsArr;
        }
    };
}

функция setChatmessages должна поменять именно поле объекта-стора, а не переменную в замыкании.

[art style]

Alexandroppolus, блин, я как раз этого избежать(ненавижу this) думал, хотел по красоте все сделать. спасибо, помогло