Rematch 快速入门教程

Rematch 快速入门教程

rematchThe Redux Framework项目地址:https://gitcode.com/gh_mirrors/re/rematch

Rematch 是一个基于 Redux 的状态管理库，旨在简化 Redux 的使用，减少样板代码。接下来，我们将了解 Rematch 的目录结构、启动文件和配置文件。

1. 项目目录结构及介绍

典型的 Rematch 项目目录可能如下所示：

my-app/
├── src/
│   ├── models/            // 存放状态管理模式
│   │   ├── index.ts        // 导出所有模式的入口文件
│   │   └── example.ts      // 一个示例模型文件
│   ├── actions/           // 可选，存放自定义 action 文件
│   ├── reducers/          // 可选，存放自定义 reducer 文件
│   ├── effects/           // 可选，存放副作用逻辑文件
│   ├── init.ts             // 初始化 Rematch 应用的地方
│   ├── App.tsx             // 主应用组件
│   └── index.tsx          // 入口文件，用于挂载应用
└── package.json           // 项目依赖和脚本配置

• models/: 存储应用的状态模型（state model）和相关的 action、reducer 和 effect。
• actions/: 可选，存放未绑定到特定模型的通用 action 函数。
• reducers/: 可选，存放不归类于某个模型的自定义 reducer。
• effects/: 可选，存放非纯函数逻辑，如网络请求。
• init.ts: 这个文件用于设置 Rematch 库，创建 store 并注入 models。
• App.tsx: 应用的主要组件，通常会从 store 获取数据并渲染 UI。
• index.tsx: 项目入口文件，常用于创建 React 应用并挂载到 DOM 中。

2. 项目的启动文件介绍

在 src/index.tsx 或类似入口文件中，你将找到初始化 React 应用和 Rematch 实例的部分。基本的设置可能会如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Store } from '@rematch/core';
import * as models from './models'; // 导入所有模型
import App from './App';

// 初始化 Rematch store
const store = new Store(models);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

这里创建了一个 Store 实例，传入了所有的模型。Provider 组件来自 React-Redux，用于在 React 树中提供 store。

3. 项目的配置文件介绍

在 Rematch 中，配置文件通常是可选的。大部分配置都是通过在 init.ts 文件中调用 createStore 方法时指定的。例如：

import { init, Store } from '@rematch/core';
import * as models from './models';

const store = init({
  models,
  // 添加额外的 Redux 中间件
  middleware: [logger],
  // 自定义 Reducer 合并策略
  reducers: {
    // ...
  },
  // 设置其他选项
});

export default store;

• middleware: 可以在这里添加自定义的 Redux 中间件，如 redux-thunk 或 redux-logger。
• reducers: 可选地，你可以覆盖默认的 Reducer 合并策略，这可能在处理特殊的 Reducer 结构时有用。

请注意，Rematch 默认已经包含了大部分的配置，因此在大多数情况下，你不需要显式地设置许多配置项。

现在你已经有了 Rematch 项目的概览，可以开始尝试创建自己的状态管理模式了。如果你遇到任何问题，记得查看 Rematch 的官方文档获取更多帮助。

rematchThe Redux Framework项目地址:https://gitcode.com/gh_mirrors/re/rematch