React / Mobx 全局状态管理问题

学习 React 看到了这个帖子 https://zhuanlan.zhihu.com/p/114292057

大概说的内容是用 mobx 创建了一个 TodoStore 实现了全局的状态管理。 问题在这里，既然用了 mobx 为何还要用 Provider?不是很明白。通过 observer 不是已经可以监听 store 的变化了吗？

下面是代码贴的是上面帖子里面的

// ./src/app.tsx import React from 'react'; import { Provider } from 'mobx-react'; import Routers from './containers/routers'; import { stores, StoresContext } from './stores'; function App() { return ( // 服务类组件 <Provider {...stores}> {/* 服务函数组件 */} <StoresContext.Provider value={stores}> <Routers /> </StoresContext.Provider> </Provider> ); } export default App; 

// ./src/containers/todo-list-fn/index.tsx import React from 'react'; import { observer } from 'mobx-react'; import { useTodoStore } from '../../stores'; function TodoListFnPage() { const { todos, undoneCount, doneCount, addNewTodo, removeById, toggleStatusById } = useTodoStore(); // 注意这里的 observer export default observer(TodoListFnPage);