Create your stores
interface Todo {
id: number;
text: string;
}
class TodoStore {
root: RootStore;
listTodo: Todo[] = [];
constructor(root: RootStore) {
makeAutoObservable(this);
this.root = root;
}
setTodo(todo: Todo) {
this.listTodo.push(todo);
}
get getTodoAll() {
return this.listTodo;
}
getTodoId(id: number) {
return this.listTodo.filter((f) => f.id == id);
}
}
class OtherStore {
root: RootStore;
totalTodoCount: number = 0;
constructor(root: RootStore) {
makeAutoObservable(this);
this.root = root;
}
init() {
// safe to access other stores
const allData = this.root.todo.getTodoAll;
this.totalTodoCount = allData.length;
}
}
Create root store & combine all stores in root
class RootStore {
todo: TodoStore;
other: OtherStore;
constructor() {
this.todo = new TodoStore(this);
this.other = new OtherStore(this);
this.other.init();
}
}
Create Provider
let store: RootStore;
const StoreContext = createContext<RootStore | undefined>(undefined);
export default function RootStoreProvider({children}: {children: ReactNode}) {
const root = store ?? new RootStore();
return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>;
}
Create hooks for accessing the store
export function useRootStore() {
const context = useContext(StoreContext);
if (context === undefined) {
throw new Error('useRootStore must be used within RootStoreProvider');
}
return context;
}
Create UI screen
const AppScreen1 = observer(() => {
const store = useRootStore();
const AddNew = () => {
const ID = Math.floor(1000 + Math.random() * 9000);
store.todo.setTodo({id: ID, text: `Todo Item ${ID}`});
};
return (
<View style={{flex: 1}}>
{store.todo.getTodoAll.map((item) => {
return (
<Text style={{fontWeight: 'bold'}}>
{item.id.toString()}/{item.text}
</Text>
);
})}
<Button title="Add New Todo" onPress={AddNew} />
</View>
);
});
Create app entry
export const AppEntry = () => {
return (
<RootStoreProvider>
<AppScreen1 />
</RootStoreProvider>
);
};
Thanks,
https://dev.to/ivandotv/mobx-root-store-pattern-with-react-hooks-318d
https://mobx.js.org/README.html
https://github.com/leighhalliday/mobx2021/blob/main/src/store.tsx
https://unsplash.com/photos/vc3iVL_znJ8
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.