Rematch 源码系列：三、Plugin Factory 和 Core Plugins

引言

在上篇文章中，我们介绍了 Rematch 的核心概念和用法。在这篇文章中，我们将详细介绍 Rematch 的插件机制以及两个核心插件。

Rematch 的插件机制

Rematch 提供了一个强大而灵活的插件机制，使得开发者可以轻松地扩展 Rematch 的功能。插件可以分为两种类型：

• Core plugins： 这些插件是 Rematch 的核心组成部分，它们提供了 Rematch 的基本功能。
• Third-party plugins： 这些插件是由第三方开发的，它们可以提供各种各样的功能，比如 Redux DevTools、Redux Saga 等。

要使用插件，开发者只需要在创建 store 的时候指定要使用的插件即可。例如，要使用 thunk middleware，可以这样写：

import { createStore } from 'rematch';
import thunkMiddleware from 'redux-thunk';

const store = createStore({
  models: {},
  plugins: [thunkMiddleware],
});

Rematch 的核心插件

Rematch 内置了两个核心插件：

• Thunk middleware： 这个插件允许开发者在 dispatch action 之前执行异步操作。
• Logger middleware： 这个插件可以帮助开发者调试和管理状态。

Thunk middleware

Thunk middleware 是一个非常流行的 Redux middleware，它允许开发者在 dispatch action 之前执行异步操作。要使用 thunk middleware，开发者需要先安装 redux-thunk 包：

npm install redux-thunk

然后，在创建 store 的时候指定要使用 thunk middleware：

import { createStore } from 'rematch';
import thunkMiddleware from 'redux-thunk';

const store = createStore({
  models: {},
  plugins: [thunkMiddleware],
});

使用 thunk middleware，开发者可以在 dispatch action 之前执行异步操作。例如，要异步获取数据，可以这样写：

import { useDispatch } from 'react-redux';

const useDispatch = useDispatch();

const getData = async () => {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();

  dispatch({
    type: 'SET_DATA',
    payload: data,
  });
};

getData();

Logger middleware

Logger middleware 是一个非常有用的工具，它可以帮助开发者调试和管理状态。要使用 logger middleware，开发者需要先安装 redux-logger 包：

npm install redux-logger

然后，在创建 store 的时候指定要使用 logger middleware：

import { createStore } from 'rematch';
import loggerMiddleware from 'redux-logger';

const store = createStore({
  models: {},
  plugins: [loggerMiddleware],
});

使用 logger middleware，开发者可以轻松地查看状态的变化。例如，在控制台中，可以看到这样的输出：

action: SET_DATA
state: {
  data: [
    {
      id: 1,
      name: 'John Doe',
    },
    {
      id: 2,
      name: 'Jane Doe',
    },
  ],
}

总结

在这篇文章中，我们介绍了 Rematch 的插件机制以及两个核心插件。Rematch 的插件机制非常强大和灵活，使得开发者可以轻松地扩展 Rematch 的功能。同时，Rematch 还内置了两个核心插件，分别是 thunk middleware 和 logger middleware，它们可以帮助开发者调试和管理状态。