Rematch状态管理工具的基本使用

最新推荐文章于 2025-01-24 17:50:35 发布

原创最新推荐文章于 2025-01-24 17:50:35 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

rematch是对redux的轻量级封装，它提升了开发效率，且不依赖redux-saga或特定视图库。这个教程展示了如何在非React环境中，如Vue，使用rematch进行状态管理。基础使用包括定义models，其中包含reducers和effects。dispatch可以直接调用同步和异步方法，无需手动创建action，简化了代码。

基本介绍

rematch是对redux的二次封装，简化了redux是使用，极大的提高了开发体验。rematch仅仅是对redux的封装，没有依赖redux-saga，也没有关联react，因此其可以用在其他的视图库中，如vue等。

基本使用

models

import Request from '../common/request';
import API from '../common/api';

export default {
    state: {
        name: '',
        data: [],
        pageSize: 10
    },

    reducers: {
        save: (state, payload) =>
    },

    effects: {
        async query(payload, rootState) {
            const res = await Request({
                type: 'GET',
                url: "xxx"
                data: { }
            });
            this.save({
                data: res.data || [],
            });
        },
        async setTop(data) {
            const res = await Request({
                type: 'POST',
                url: API.xxx,
                data
            });
            if (res.success) {
                this.query();
            }
        }
    }
};

dispatch

dispatch可以直接调用同步和异步方法，不必再发送action

// reducers
dispatch({ type: 'count/increment', payload: 1 }) // state = { count: 1 }
dispatch.count.increment(1)                       // state = { count: 2 }

// effects
dispatch({ type: 'count/incrementAsync', payload: 1 }) // state = { count: 3 } after delay
dispatch.count.incrementAsync(1)                       // state = { count: 4 } after delay