MobX 异步数据加载与 Redux 比较

在 React 应用中，处理异步任务是一个常见的挑战。Redux 和 MobX 都提供了处理异步数据的方法，但它们各有优劣。以下将详细介绍如何在 MobX 中实现异步数据加载，并与 Redux 的异步处理进行对比。

Redux 与 MobX 异步处理的对比

Redux 异步处理 - Thunk 中间件

Redux 提供了一个名为 Thunk 的中间件，可以用来在 reducers 中定义异步操作。通过使用 dispatch 函数，可以将 actions 组合成一个 thunk 函数，这个函数可以执行异步操作，例如 API 请求，并在完成后通过 dispatch 发送一个 action 更新状态。

MobX 异步处理 - Saga 或 Thunk 中间件

MobX 提供了两种异步处理方法：Saga 和 Thunk。MobX 的 Thunk 和 Redux 的 Thunk 有相似之处，但 MobX 的 Saga 更加强大，支持更复杂的异步操作，包括并发和错误处理。

使用 MobX 实现异步数据加载

配置远端请求

安装必要的依赖：

npm install json-server axios

创建 JSON 数据文件：

./src/todo.json{  "todos": [    { "id": 1, "title": "React", "completed": false },    { "id": 2, "title": "Angular", "completed": false },    { "id": 3, "title": "Vue", "completed": false }  ]}

安装 Axios：

npm install axios

创建 `loadTodos` 异步任务

TodoListStore 类

import { makeObservable, observable, action, computed, runInAction } from "mobx";import TodoViewStore from "./TodoViewStore";import axios from "axios";class TodoListStore {  todos = [];  filter = "all";  constructor(todos) {    if (todos) this.todos = todos;    makeObservable(      this,      {        todos: observable,        filter: observable,        createTodo: action,        deleteTodo: action,        clear: action.bound,        changeFilter: action.bound,        unCompletedTodoCount: computed,        filterTodos: computed      }    );    this.loadTodos();  }  async loadTodos() {    const todos = await axios.get("http://localhost:3005/todos").then(response => response.data);    runInAction(() => this.todos.push(...todos.map(todo => new TodoViewStore(todo.title))));  }}

RootStore 统一管理

import TodoListStore from "./TodoStore/TodoListStore";import CounterStore from "./CounterStore/CounterStore";import { createContext, useContext } from "react";class RootStore {  constructor() {    this.counterStore = new CounterStore();    this.todoListStore = new TodoListStore();  }}const RootStoreContext = createContext();const RootStoreProvider = ({ store, children }) => (  
     
          {children}  
     );const useRootStore = () => useContext(RootStoreContext);export { RootStore, RootStoreProvider, useRootStore };

组件开发

TodoFooter 组件

import { observer } from "mobx-react-lite";import { useRootStore } from "../../stores/RootStore";import { useTodoListStore } from "../../stores/TodoStore/TodoListStore";function TodoFooter() {  const { todoListStore } = useRootStore();  const { filter, changeFilter } = todoListStore;  return (    
           
              
       {todoListStore.unCompletedTodoCount} item left      
      
      
              
                         
        
                         
        
                         
      
      
      
          
     
  );}export default observer(TodoFooter);

使用 `autorun` 进行数据监测

import { observer } from "mobx-react-lite";import { useEffect } from "react";import { autorun } from "mobx";import axios from "axios";function TodoHeader() {  const [title, setTitle] = useState("");  const { todoListStore } = useRootStore();  const handleAddTodo = (e) => {    if (e.key === "Enter") {      todoListStore.createTodo(title);      setTitle("");    }  };  return (    
           
      todos
      
       setTitle(event.target.value)}        onKeyUp={handleAddTodo}      />    
     
  );}export default observer(TodoHeader);

MobX 异步操作的注意事项

远端请求中的数据转换

在 loadTodos 方法中，使用 runInAction 将异步操作包裹在一个 Action 中执行，以确保在 MobX 环境下正确更新状态。

MobX 异步数据的监测

MobX 提供了 autorun 方法，可以用来监控状态的变化。例如，在 TodoHeader 组件中，可以使用 autorun 来跟踪 todoListStore 的状态变化。

MobX 的优化配置

为了避免 ESLint 警告，可以在项目根目录下创建 .eslintrc.js 文件：

module.exports = {  plugins: ["react-hooks"],  rules: {    "react-hooks/exhaustive-deps": 0  }};

总结

在 MobX 中，通过 runInAction 方法，可以在异步操作完成后触发一个 Action，用于更新状态。这与 Redux 的 Thunk 中间件类似，但 MobX 提供了更强大的异步控制能力。通过合理使用 autorun 和 reaction 方法，可以实现对状态的精细监测和响应。在实际开发中，合理配置 ESLint 并通过提供必要的上下文，可以确保组件的高效运行和良好的代码质量。

转载地址：http://ytbzz.baihongyu.com/

你可能感兴趣的文章