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 (1)
MobX is a powerful state management library for React applications, offering simplicity and flexibility in managing application state. In this tutorial, we'll explore how to create MobX stores in React Native using Hooks and demonstrate the process of combining multiple stores to handle complex state requirements effectively. Here's what we'll cover:
rainocode.com/blog/create-mobx-sto...