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

基本介绍

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