Rematch状态管理库安装与基础使用指南

Rematch状态管理库安装与基础使用指南

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

什么是Rematch？

Rematch是一个基于Redux构建的轻量级状态管理框架，它简化了Redux的使用流程，提供了更简洁的API和开发体验。相比原生Redux，Rematch减少了样板代码，让开发者能够更专注于业务逻辑的实现。

安装Rematch

安装Rematch非常简单，只需要运行以下命令：

npm install @rematch/core

或者如果你使用yarn：

yarn add @rematch/core

基础使用教程

第一步：定义模型(Model)

模型是Rematch的核心概念，它将状态(state)、同步更新(reducers)和异步操作(effects)组织在一个地方。模型描述了Redux store中的一个切片以及它是如何变化的。

定义一个模型需要回答三个基本问题：

1. 初始状态是什么？ → state
2. 如何同步更新状态？ → reducers
3. 如何处理异步操作？ → effects

JavaScript示例

export const count = {
  state: 0, // 初始状态
  reducers: {
    // 使用纯函数处理状态变更
    increment(state, payload) {
      return state + payload;
    },
  },
  effects: (dispatch) => ({
    // 处理异步操作
    async incrementAsync(payload, rootState) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      dispatch.count.increment(payload);
    },
  }),
};

TypeScript示例

对于TypeScript项目，可以使用createModel辅助方法创建类型安全的模型：

import { createModel } from "@rematch/core";
import { RootModel } from ".";

export const count = createModel<RootModel>()({
  state: 0,
  reducers: {
    increment(state, payload: number) {
      return state + payload;
    },
  },
  effects: (dispatch) => ({
    async incrementAsync(payload: number, state) {
      console.log("当前根状态", state);
      await new Promise((resolve) => setTimeout(resolve, 1000));
      dispatch.count.increment(payload);
    },
  }),
});

第二步：初始化Store

init方法是构建完整配置的Redux store的唯一入口。最少只需要提供models对象即可：

JavaScript示例

import { init } from "@rematch/core";
import * as models from "./models";

const store = init({ models });

export default store;

TypeScript示例

import { init, RematchDispatch, RematchRootState } from "@rematch/core";
import { models, RootModel } from "./models";

export const store = init({
  models,
});

export type Store = typeof store;
export type Dispatch = RematchDispatch<RootModel>;
export type RootState = RematchRootState<RootModel>;

第三步：派发Actions

通过dispatch可以触发模型中定义的reducers和effects。Rematch提供了两种派发方式：

const { dispatch } = store;

// 直接调用方式
dispatch({ type: "count/increment", payload: 1 });

// 简写方式（推荐）
dispatch.count.increment(1);

// 异步effect调用
dispatch.count.incrementAsync(1);

第四步：在视图中使用

Rematch可以与各种UI框架集成，下面是React中的使用示例：

JavaScript示例

import React from "react";
import { Provider, connect } from "react-redux";
import store from "./store";

const Count = ({ count, increment, incrementAsync }) => (
  <div>
    当前计数: {count}
    <button onClick={increment}>增加</button>
    <button onClick={incrementAsync}>异步增加</button>
  </div>
);

const mapState = (state) => ({
  count: state.count,
});

const mapDispatch = (dispatch) => ({
  increment: () => dispatch.count.increment(1),
  incrementAsync: () => dispatch.count.incrementAsync(1),
});

const CountContainer = connect(mapState, mapDispatch)(Count);

ReactDOM.render(
  <Provider store={store}>
    <CountContainer />
  </Provider>,
  document.getElementById("root")
);

TypeScript示例

import * as React from "react";
import { Provider, connect } from "react-redux";
import { RootState, Dispatch } from "./store";

// ...（省略类型定义部分，与JavaScript类似）

class Count extends React.Component<Props> {
  render() {
    return (
      <div>
        当前计数: {this.props.count}
        <button onClick={() => this.props.increment()}>增加</button>
        <button onClick={() => this.props.incrementAsync()}>异步增加</button>
      </div>
    );
  }
}

// ...（省略connect部分，与JavaScript类似）

总结

Rematch通过简化Redux的使用流程，让状态管理变得更加直观和高效。本文介绍了从安装到基础使用的完整流程，包括模型定义、store初始化、action派发和视图集成。对于刚接触状态管理的新手，Rematch是一个很好的起点；对于有经验的开发者，Rematch也能提供更简洁的开发体验。

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