React 中使用 mobx

配置开发环境

安装mobx和中间件工具 mobx-react-lite 只能函数组件中使用

yarn add  mobx  mobx-react-lite

初始化 mobx

1. 定义数据状态 state
2. 在构造器中实现数据响应式处理 makeAutoObservble
3. 定义修改数据的函数 action
4. 实例化 store 并导出

import { computed, makeAutoObservable } from "mobx";class CounterStore {list = [1, 2, 3, 4, 5, 6];constructor() {makeAutoObservable(this, {filterList: computed,});}// 修改原数组changeList = () => {this.list.push(7, 8, 9);};// 定义计算属性get filterList() {return this.list.filter((item) => item > 4);}
}const counter = new CounterStore();export default counter;

使用 store

1. 在组件中导入 counterStore 实例对象
2. 在组件中使用 storeStore 实例对象中的数据
3. 通过事件调用修改数据的方法修改 store 中的数据
4. 让组件响应数据变化

// 导入counterStore
import counterStore from "./store";
// 导入observer方法
import { observer } from "mobx-react-lite";
function App() {return (<div className="App">{/* 原数组 */}{JSON.stringify(counterStore.list)}{/* 计算属性 */}{JSON.stringify(counterStore.filterList)}<button onClick={() => counterStore.changeList()}>change list</button></div>);
}
// 包裹组件让视图响应数据变化
export default observer(App);

异步处理数据

1. 在 mobx 中编写异步请求方法 获取数据 存入 state 中
2. 组件中通过 useEffect + 空依赖 触发 action 函数的执行

// 异步的获取import { makeAutoObservable } from "mobx";
import axios from "axios";class ChannelStore {channelList = [];constructor() {makeAutoObservable(this);}// 只要调用这个方法 就可以从后端拿到数据并且存入channelListsetChannelList = async () => {const res = await axios.get("http://XXX");this.channelList = res.data.channels;};
}
const channlStore = new ChannelStore();
export default channlStore;

import { useEffect } from "react";
import { useStore } from "./store";
import { observer } from "mobx-react-lite";
function App() {const { channlStore } = useStore();// 1. 使用数据渲染组件// 2. 触发action函数发送异步请求useEffect(() => {channlStore.setChannelList();}, []);return (<ul>{channlStore.channelList.map((item) => (<li key={item.id}>{item.name}</li>))}</ul>);
}
// 让组件可以响应数据的变化[也就是数据一变组件重新渲染]
export default observer(App);

模块化

1. 拆分模块 js 文件，每个模块中定义自己独立的 state/action
2. 在 store/index.js 中导入拆分之后的模块，进行模块组合
3. 利用 React 的 context 的机制导出统一的 useStore 方法，给业务组件使用

1. store/taskStore.js

import { makeAutoObservable } from "mobx";class TaskStore {taskList = [];constructor() {makeAutoObservable(this);}addTask() {this.taskList.push("vue", "react");}
}const task = new TaskStore();export default task;

2. store/counterStore.js

import { makeAutoObservable } from "mobx";class CounterStore {count = 0;list = [1, 2, 3, 4, 5, 6];constructor() {makeAutoObservable(this);}addCount = () => {this.count++;};changeList = () => {this.list.push(7, 8, 9);};get filterList() {return this.list.filter((item) => item > 4);}
}const counter = new CounterStore();export default counter;

3. 整合导出统一方法 store/index.js

import React from "react";import counter from "./counterStore";
import task from "./taskStore";class RootStore {constructor() {this.counterStore = counter;this.taskStore = task;}
}const rootStore = new RootStore();// context机制的数据查找链  Provider如果找不到 就找createContext方法执行时传入的参数
const context = React.createContext(rootStore);const useStore = () => React.useContext(context);export { useStore };

4. 组件中使用

import { observer } from "mobx-react-lite";
// 导入方法
import { useStore } from "./store";
function App() {// 得到storeconst store = useStore();return (<div className="App"><button onClick={() => store.counterStore.addCount()}>{store.counterStore.count}</button></div>);
}
// 包裹组件让视图响应数据变化
export default observer(App);