0
# Store Management
1

2
Provider/inject pattern for sharing MobX stores across React component trees using React context, providing dependency injection capabilities.
3

4
## Capabilities
5

6
### Provider Component
7

8
Provides MobX stores to child components via React context.
9

10
```typescript { .api }
11
/**
12
 * Provides MobX stores to child components via React context
13
 * @param props - Provider props containing stores and children
14
 * @returns JSX element that provides context
15
 */
16
function Provider(props: ProviderProps): JSX.Element;
17

18
interface ProviderProps extends IValueMap {
19
  children: React.ReactNode;
20
}
21

22
type IValueMap = Record<string, any>;
23
```
24

25
**Usage Example:**
26

27
```typescript
28
import React from "react";
29
import { Provider } from "mobx-react";
30
import { TodoStore } from "./stores/TodoStore";
31
import { UserStore } from "./stores/UserStore";
32

33
const todoStore = new TodoStore();
34
const userStore = new UserStore();
35

36
function App() {
37
  return (
38
    <Provider todoStore={todoStore} userStore={userStore}>
39
      <TodoApp />
40
    </Provider>
41
  );
42
}
43
```
44

45
### MobX Provider Context
46

47
React context object for accessing MobX stores directly.
48

49
```typescript { .api }
50
/**
51
 * React context for MobX stores
52
 */
53
const MobXProviderContext: React.Context<IValueMap>;
54
```
55

56
**Usage Example:**
57

58
```typescript
59
import React from "react";
60
import { MobXProviderContext } from "mobx-react";
61

62
function TodoList() {
63
  const stores = React.useContext(MobXProviderContext);
64
  const { todoStore } = stores;
65
  
66
  return (
67
    <div>
68
      {todoStore.todos.map(todo => (
69
        <div key={todo.id}>{todo.title}</div>
70
      ))}
71
    </div>
72
  );
73
}
74
```
75

76
### Inject Higher-Order Component
77

78
Injects stores from Provider context into component props with multiple signature options.
79

80
```typescript { .api }
81
/**
82
 * Injects specific stores by name from Provider context
83
 * @param stores - Store names to inject as props
84
 * @returns Higher-order component that injects stores
85
 */
86
function inject(...stores: Array<string>): <T extends IReactComponent<any>>(target: T) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never);
87

88
/**
89
 * Injects stores using a custom mapping function
90
 * @param fn - Function that maps available stores to component props
91
 * @returns Higher-order component that injects mapped stores
92
 */
93
function inject<S extends IValueMap = {}, P extends IValueMap = {}, I extends IValueMap = {}, C extends IValueMap = {}>(
94
  fn: IStoresToProps<S, P, I, C>
95
): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>;
96

97
type IStoresToProps<
98
  S extends IValueMap = {},
99
  P extends IValueMap = {},
100
  I extends IValueMap = {},
101
  C extends IValueMap = {}
102
> = (stores: S, nextProps: P, context?: C) => I;
103

104
interface IWrappedComponent<P> {
105
  wrappedComponent: IReactComponent<P>;
106
}
107
```
108

109
**Usage Examples:**
110

111
```typescript
112
import React from "react";
113
import { inject, observer } from "mobx-react";
114

115
// Inject specific stores by name
116
const TodoList = inject("todoStore")(observer(({ todoStore }) => (
117
  <div>
118
    {todoStore.todos.map(todo => (
119
      <div key={todo.id}>{todo.title}</div>
120
    ))}
121
  </div>
122
)));
123

124
// Inject multiple stores
125
const Dashboard = inject("todoStore", "userStore")(observer(({ todoStore, userStore }) => (
126
  <div>
127
    <h1>Welcome {userStore.currentUser.name}</h1>
128
    <p>You have {todoStore.todos.length} todos</p>
129
  </div>
130
)));
131

132
// Custom store mapping
133
const TodoStats = inject((stores, props) => ({
134
  completedCount: stores.todoStore.completedTodos.length,
135
  totalCount: stores.todoStore.todos.length,
136
  userName: stores.userStore.currentUser.name
137
}))(observer(({ completedCount, totalCount, userName }) => (
138
  <div>
139
    {userName}: {completedCount}/{totalCount} completed
140
  </div>
141
)));
142

143
// Class component with decorator
144
@inject("todoStore")
145
@observer
146
class TodoManager extends React.Component {
147
  render() {
148
    const { todoStore } = this.props;
149
    return <div>{todoStore.todos.length} todos</div>;
150
  }
151
}
152
```
153

154
## Types
155

156
```typescript { .api }
157
type IValueMap = Record<string, any>;
158

159
interface IWrappedComponent<P> {
160
  wrappedComponent: IReactComponent<P>;
161
}
162

163
type IStoresToProps<
164
  S extends IValueMap = {},
165
  P extends IValueMap = {},
166
  I extends IValueMap = {},
167
  C extends IValueMap = {}
168
> = (stores: S, nextProps: P, context?: C) => I;
169

170
interface ProviderProps extends IValueMap {
171
  children: React.ReactNode;
172
}
173
```