Redux和MobX入门使用指南

2023-09-22 09:53:46

Redux入门使用

Redux是一个轻量级、可预测的状态管理库，遵循Flux架构。它将应用程序的状态存储在一个中央存储库中，并提供一个单一的API来读取和更新状态。Redux最核心的概念是单向数据流，即所有状态更改都必须通过action来进行。

1. Redux的基本概念

状态：Redux应用程序的状态就是应用程序中所有数据的集合。
动作（Action） ：动作是一个了如何更改状态的对象。
Reducer ：Reducer是一个纯函数，它接受当前状态和一个动作，并返回一个新的状态。
Store ：Store是一个对象，它存储着应用程序的当前状态。

2. Redux的基本用法

创建一个Redux应用程序，需要先创建store，然后创建reducer，最后将reducer注册到store中。

// 创建store
const store = createStore(reducer);

// 创建reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
};

// 将reducer注册到store中
store.subscribe(() => {
  console.log(store.getState());
});

// 派发一个action
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

MobX入门使用

MobX是一个基于反应式编程思想的状态管理库。它将应用程序的状态存储在一个可观察对象中，并提供一个简单的API来读取和更新状态。MobX最核心的概念是响应式状态，即状态的变化会自动触发组件的重新渲染。

1. MobX的基本概念

状态：MobX应用程序的状态就是应用程序中所有数据的集合。
可观察对象（Observable） ：可观察对象是一个可以被观察的状态对象。
反应式计算（Computed） ：反应式计算是一个依赖于一个或多个可观察对象的函数，当这些可观察对象发生变化时，反应式计算也会重新计算。
动作（Action） ：动作是一个了如何更改状态的对象。

2. MobX的基本用法

创建一个MobX应用程序，需要先创建一个可观察对象，然后创建反应式计算，最后将动作注册到可观察对象上。

// 创建可观察对象
const todoList = observable([
  { id: 1, title: 'Learn MobX' }
]);

// 创建反应式计算
const completedTodos = computed(() => {
  return todoList.filter(todo => todo.completed);
});

// 创建动作
const addTodo = (title) => {
  todoList.push({ id: Date.now(), title });
};

// 将动作注册到可观察对象上
todoList.intercept(change => {
  if (change.type === 'add') {
    console.log(`Added a new todo: ${change.newValue.title}`);
  }
});

// 添加一个todo
addTodo('Learn React');

// 打印已完成的todo
console.log(completedTodos);

Redux和MobX的优缺点比较

特性	Redux	MobX
架构	Flux	反应式编程
状态存储	中央存储库	可观察对象
状态更新	单向数据流	双向数据流
性能	较好	较差
学习曲线	较陡峭	较平缓
社区支持	庞大	活跃