React-使用mobx

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);
  }
  // 只要调用这个方法 就可以从后端拿到数据并且存入channelList
  setChannelList = 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() {
  // 得到store
  const store = useStore();
  return (
    <div className="App">
      <button onClick={() => store.counterStore.addCount()}>
        {store.counterStore.count}
      </button>
    </div>
  );
}
// 包裹组件让视图响应数据变化
export default observer(App);