How do I install the Mobx Dependency Injection skill?

Run npx skillmds@latest add liaosw97/mobx-dependency-injection in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Mobx Dependency Injection skill do?

为 stores 实现适当的依赖注入 It is listed under Coding & Dev Tools on SkillMD.

Is Mobx Dependency Injection safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mobx Dependency Injection?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mobx Dependency Injection free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mobx Dependency Injection?

liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mobx Dependency Injection by liaosw97

Name: Mobx Dependency Injection
Rating: 4.2 (5 reviews)
Author: liaosw97

File contents

为 stores 实现适当的依赖注入：

使用 React Context 提供 store：

推荐使用 React Context API 来将 MobX store 注入到组件树中，避免手动通过 props 层层传递（prop drilling）。
创建一个 StoreContext，并在应用程序的根组件中使用 Provider 提供 store 实例。

示例：

// stores/index.js
import { createContext, useContext } from 'react';
import { RootStore } from './RootStore';

export const RootStoreInstance = new RootStore();
export const StoreContext = createContext(RootStoreInstance);
export const useStore = () => useContext(StoreContext);

// App.js
import React from 'react';
import { StoreContext, RootStoreInstance } from './stores';

function App() {
  return (
    <StoreContext.Provider value={RootStoreInstance}>
      {/* Your application components */}
    </StoreContext.Provider>
  );
}

自定义 Hook 简化使用：

创建一个自定义 Hook（如 useStore）来简化组件中对 store 的访问，提高代码可读性。

示例：

// components/MyComponent.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from '../stores';

const MyComponent = observer(() => {
  const { userStore } = useStore();

  return (
    <div>
      <p>User Name: {userStore.name}</p>
      <button => userStore.setName('New Name')}>Change Name</button>
    </div>
  );
});

测试友好：依赖注入使得在单元测试中替换或模拟 store 变得容易，提高了测试的独立性和效率。
避免全局变量：避免将 store 实例作为全局变量直接导入，这会降低模块的独立性和可测试性。

---name: mobx-dependency-injectiondescription: 为 stores 实现适当的依赖注入---- **为 stores 实现适当的依赖注入**： - **使用 React Context 提供 store**： - 推荐使用 React Context API 来将 MobX store 注入到组件树中，避免手动通过 props 层层传递（prop drilling）。 - 创建一个 `StoreContext`，并在应用程序的根组件中使用 `Provider` 提供 store 实例。 - 示例： ```jsx // stores/index.js import { createContext, useContext } from 'react'; import { RootStore } from './RootStore'; export const RootStoreInstance = new RootStore(); export const StoreContext = createContext(RootStoreInstance); export const useStore = () => useContext(StoreContext); // App.js import React from 'react'; import { StoreContext, RootStoreInstance } from './stores'; function App() { return ( <StoreContext.Provider value={RootStoreInstance}> {/* Your application components */} </StoreContext.Provider> ); } ``` - **自定义 Hook 简化使用**： - 创建一个自定义 Hook（如 `useStore`）来简化组件中对 store 的访问，提高代码可读性。 - 示例： ```jsx // components/MyComponent.js import React from 'react'; import { observer } from 'mobx-react-lite'; import { useStore } from '../stores'; const MyComponent = observer(() => { const { userStore } = useStore(); return ( <div> <p>User Name: {userStore.name}</p> <button onClick={() => userStore.setName('New Name')}>Change Name</button> </div> ); }); ``` - **测试友好**：依赖注入使得在单元测试中替换或模拟 store 变得容易，提高了测试的独立性和效率。 - **避免全局变量**：避免将 store 实例作为全局变量直接导入，这会降低模块的独立性和可测试性。

Frequently asked questions

Mobx Dependency Injection