Skip to content

🍀 Redux side effect management program | Redux 副作用管理方案

Notifications You must be signed in to change notification settings

zhouzuchuan/model-redux

Repository files navigation

Model Redux

download npm GitHub license

它是什么

是对 redux 的抽象 model 封装,通过实现 model 层,来管理应用的副作用。

下载

npm install model-redux --save

# or

yarn add model-redux

特点

  • 减少使用 redux 所必须写的样板代码
  • 统一管理副作用,实现组件与状态的解耦
  • 数据持久化

核心

create

import modelRedux from 'model-redux';

const { store } = modelRedux.create();

用来创建 model 方法,需要一个 options 参数

option.middlewares 需要额外注入的中间件

option.effects 需要使用的副作用

内置两套副作用管理 redux-saga redux-observable, 默认采用是 redux-observable

如果想同时引用两个,或者 redux-saga,则可以用以下的方式

import modelRedux from 'model-redux';
import epics from 'model-redux/lib/effects/epics';
import sagas from 'model-redux/lib/effects/sagas';

const { store } = modelRedux.create({
    middlewares: [],
    // effects function 支持传入一个参数 即指定model中的字段 默认为当前的 effects name 分别为 epics、 sagas
    effects: [epics(), sagas()],
    // effects:  sagas()
});

create 返回两个参数

store

全局状态

vue 以及 react 都有相应的使用方法,下面会介绍

registerModel

注册 model 方法

需要个参数,就是 model 的数据,支持数组的方式注入多个

model 规范

namespace

命名空间

state

当前 model 的数据状态

具体参数可以参考官方 API redux-persist

reducers

同于 redux 里的 reducer,接收 action,同步更新 state 声明更改 stateaction(必须为纯函数)

其他参数

这里的其他参数就是收集副作用的参数,如 使用了默认的 redux-observable 则,管理副作用的字段就是 epicsredux-saga 则是 sagas,当然这个字段也是可以根据自己使用来定义。通过 option.effects 注入,如下:

import modelRedux from 'model-redux';
import sagas from 'model-redux/lib/effects/sagas';

const { store } = modelRedux.create({
    middlewares: [],
    effects: sagas('effects'),
});

将管理 redux-saga 的字段定为 effects

使用

统一的 model (这里只是展示用法),model 可以在初始化中注册,也可以实现按需加载注册

// app.js

import { mapTo } from 'rxjs/operators';

export default {
    namespace: 'app',
    state: {},
    epics: {
        add: epic$ => return epic$.pipe(
                mapTo({
                    type: 'app/success',
                    payload: 'ddd'
                })
            )
    },
    reducers: {
        success(store) {
            return store;
        }
    }
};

调用当前 model 中 reducers 时,action type 可以省略命名空间, 如果是跨 model 则必须添加命名空间

    epics: {
        add: epic$ => return epic$.pipe(
                switchMap(() => [
                    // dispatch 当前 model 的 success reducers
                    {
                        type: 'success',
                        payload: 'ddd'
                    },
                    // dispatch edit model的 success reducers
                    {
                    type: 'edit/success',
                    payload: 'ddd'
                },
                ])
            )
    },

React

对于 react 的使用,可以使用 已经内置了 model-redux 的无侵入架构增强器 react-enhanced

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import modelRedux from 'model-redux';
import App from './App';

import appModel from './app.js';

const { store, registerModel } = modelRedux.create();

registerModel(appModel);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);
registerServiceWorker();
// 子组件

import React from 'react';
import { connect } from 'react-redux';

class ChlidrenComponent extends React.Component {
    // ...
    render() {
        return <span onClick={this.props.handleAdd}>model-redux</span>;
    }
}

export default connect(
    null,
    dispatch => {
        return {
            handleAdd() {
                dispatch({
                    type: 'app/add',
                });
            },
        };
    },
)(ChlidrenComponent);

其他可以使用 redux 的架构的框架 都可以使用 model-redux
比如 小程序多端框架 taro

License

MIT

致敬

dva

开发计划

About

🍀 Redux side effect management program | Redux 副作用管理方案

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published