Для получения доступа к хранилищу MobX (store) из кастомного хука в React, вы можете воспользоваться следующими шагами:
1. Установите MobX и MobX React:
npm install mobx mobx-react
2. Создайте ваше хранилище MobX с помощью observable
и action
:
import { observable, action } from 'mobx'; class MyStore { @observable data = []; @action fetchData() { // Здесь вы можете получить данные, например, с сервера // и сохранить их в this.data } } const store = new MyStore();
3. Оберните вашу React корневую компоненту в <Provider>
и передайте туда ваше хранилище:
import { Provider } from 'mobx-react'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
4. В вашем кастомном хуке, вы можете получить доступ к хранилищу с помощью функции useContext
из React:
import { useContext } from 'react'; import { MobXProviderContext } from 'mobx-react'; function useCustomHook() { const { store } = useContext(MobXProviderContext); // Теперь вы можете использовать ваше хранилище в хуке // например, вызвать ваше действие fetchData store.fetchData(); } export default useCustomHook;
Вот и все! Теперь вы можете использовать ваше хранилище MobX в вашем кастомном хуке, получая доступ к его данным и вызывая его действия для изменения состояния. Обратите внимание, что ваш кастомный хук должен быть использован внутри компоненты, обернутой в <Provider>
.