推荐一款超高效状态管理工具：Rematch js

华建万

于 2024-08-12 09:04:04 发布

阅读量365

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00572/article/details/141121807

推荐一款超高效状态管理工具：Rematch js

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

在前端开发中，状态管理一直是一项重要任务。Redux以其强大的功能和广泛的应用场景被誉为状态管理的神器，但随之而来的冗余代码也让开发者感到头疼。今天，我们要向您推荐一个简化Redux最佳实践的框架——Rematch js，它在不增加额外负担的情况下，将状态管理变得简单易行。

项目简介

Rematch js是一个轻量级的状态管理库，基于Redux构建，但摒弃了繁琐的配置、action类型、action creator、switch语句以及thunk。它的核心目标是减少boilerplate代码，提高开发效率。不到1.4KB的体积，却包含了所有你需要的功能，如内置副作用支持、React DevTools集成、动态添加reducers、热重载等。

技术解析

Rematch的设计思路简洁明快，它引入了一些独特特性：

无需配置：开箱即用，无需额外设置。
模型驱动：通过创建model定义状态和操作，实现数据管理的结构化。
内置副作用：支持async/await，让异步操作更直观。
TypeScript支持：提供强大的类型检查，提升开发体验。

应用场景

无论是Web应用还是React Native项目，Rematch都能轻松胜任。它可以用于全局状态管理、复杂业务逻辑处理、多store配置，甚至可以与其他库如redux-persist、immer.js和reselect无缝结合，实现持久化存储、不可变数据操作和高效选择器等功能。

项目特点

以下是Rematch的一些亮点：

精简版Redux：保留Redux的核心优势，减少冗余代码。
扩展性：支持插件机制，可自定义或使用社区提供的插件。
易于迁移：从Redux迁移到Rematch平滑过渡，改动小，影响面窄。
强大生态：拥有活跃的社区、详尽的文档、丰富的示例代码。

例如，要实现从远程API获取并存储玩家信息，用Rematch只需短短几行代码，无需额外的action或thunk：

type PlayersState = {
    players: PlayerModel[];
}

export const players = createModel<RootModel>()({
    state: {
        players: [],
    } as PlayersState,
    reducers: {
        SET_PLAYERS: (state, players) => ({...state, players}),
    },
    effects: (dispatch) => ({
        async getPlayers() {
            const response = await fetch('https://www.balldontlie.io/api/v1/players');
            const {data} = await response.json();
            dispatch.players.SET_PLAYERS(data);
        },
    }),
});