Redux Model

English Document

Redux-Model是为了弥补原生Redux繁琐的开发流程，开发者重复劳动效率低下，模板文件导致代码量臃肿，以及因action和reducer文件分散造成代码追踪困难的问题而设计的。

特性

• 深度封装，模块化开发
• 使用mvvm快速处理reducer
• 👍真正意义上的Typescript框架，写起来比JS更流畅
• 内置http服务，请求action自带loading追踪、数据节流
• 支持React/Vue Hooks
• 支持数据持久化
• 支持Graphql请求
• 支持代码分离

安装

React 或 React-Native

npm install @redux-model/react

Taro

# taro 3+
npm install @redux-model/taro

# taro 2+
npm install @redux-model/taro@6.10.0 @tarojs/redux

# taro 1+
npm install @redux-model/taro@6.9.5 @tarojs/redux

Vue

# vue 3+
npm install @redux-model/vue

# vue 2+
npm install @redux-model/vue@6.9.2

定义模型

interface Response {
  id: number;
  name: string;
}

interface Data {
  counter: number;
  users: Partial<{
    [key: string]: Response;
  }>;
}

class TestModel extends Model<Data> {
  plus = this.action((state, step: number = 1) => {
    state.counter += step;
  });

  getUser = $api.action((id: number) => {
    return this
      .get<Response>(`/api/users/${id}`)
      .onSuccess((state, action) => {
        state.users[id] = action.response;
      });
  });

  protected initialState(): Data {
    return {
      counter: 0,
      users: {},
    };
  }
}

export const testModel = new TestModel();

执行Action

testModel.plus();
testModel.plus(2);

testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});

在 Hooks 中获取数据

`typescript jsx const data = testModel.useData(); // { counter: number, users: object }

const counter = testModel.useData((data) => data.counter); // number const users = testModel.useData((data) => data.users); // object

const loading = testModel.getUser.useLoading(); // boolean

# 在 connect 中获取数据
```typescript jsx
type ReactProps = ReturnType<typeof mapStateToProps>;

const mapStateToProps = () => {
  return {
    counter: testModel.data.counter, // number
    users: testModel.data.users, // object
    loading: testModel.getUser.loading, // boolean
  };
};

export default connect(mapStateToProps)(App);

在线运行示例

• 计数器
• 数据持久化
• TODO面板
• 请求
• 请求节流
• 任务监听
• 任务组合
• 子任务

文档

请点击这里查看文档

本地开发

• git clone 你fork的仓库
• yarn install && yarn bootstrap

执行测试用例请使用 yarn test
修改在线文档请使用 yarn docs

欢迎使用并随时给我建议

9.0.6

[重构] 完善Map和Set的浅对比逻辑，减少重渲染概率 [修复] 在ESM中未能正确识别代码是否已被压缩

9.0.4

[修复] react-redux浅对比无法处理Map和Set对象

9.0.3

[特性] Taro service在httpResponse参数中增加config属性

9.0.2

[修复] 模块循环引用的问题

9.0.1

[修复] 在不支持Proxy的环境中immer报错问题

9.0.0

Breaking

• 重构 自动引入了 redux 和 react-redux，请将项目中相关的库删除
  

  yarn remove redux react-redux @types/react-redux

  `diff
• import { Middleware } from 'redux'

• import { Middleware } from '@redux-model/react'

• import { Provider } from 'react-redux'

• import { Provider } from '@redux-model/react'

• import { connect } from 'react-redux'

• import { connect } from '@redux-model/react' `
• 重构 模型实例方法 effects() 重命名为 subscriptions()，更具表达力
  `diff class TestModel extends Model {
• protected effects(): Effects<Data> {
• protected subscriptions(): Subscriptions<Data> { return [

  ...,
  ...,

  ]; } } `
• 重构 模型实例方法 useData 总是采用浅对比的方式获取数据，以降低组件重渲染的概率
  
• 重构 请求服务属性 requestConfig 重命名为 requestOptions，统一名称
  
• 删除 模型实例方法 autoRegister()，模型一定是自动注册的
  
• 删除 模型实例方法 register()，您无需手动注册。在代码分离时，如果您想提前注册，直接在入口import 'xyzModel'即可
  
• 删除 模型构造函数中的 alias 参数，即使出现同名类，重写方法 getReducerName() 即可
  
• 删除 HttpService.transformSuccessData，并引入 HttpService.onRespondSuccess 做为代替属性
  
• 删除 createReduxStore.onCombineReducers 属性，缺少使用场景
  

Features

• 新增 全局方法 resetStore()，用于重置所有模型数据，并支持部分模型保留数据
  `diff import { resetStore } from '@redux-model/react';

logout().then(() => {

• resetStore(); }); `

• 新增 模型实例方法 keepOnResetStore()，用于重置数据时保护当前模型不被影响
  `diff class TestModel extends Model<Data> { protected initialState(): Data { return {}; }

• protected keepOnResetStore() {

• return true;
• } } `
• 新增 模型静态方法 init()，用于延迟自动注册以满足定制初始化数据的需求
  `diff interface Data { counter: number; }

class TestModel extends Model<Data> {

• protected readonly initCounter: number;

  constructor(p1: number) { super();

• this.initCounter = p1; }

  protected initialState(): Data { return {

• counter: this.initCounter, }; } }

• const testModel = new TestModel(10); // testModel.data.counter === undefined

• const testModel = TestModel.init(10); // testModel.data.counter === 10 `

Fixes

• 修复 Taro-h5请求异常时未解析data
• 修复 Taro-h5请求不支持abort操作

8.2.2

• Support es modules
  
• HttpService add property onRespondSuccess to instead of transformSuccessData
• Improve performance of redux

• 支持es模块
  
• 服务类增加属性onRespondSuccess以代替旧属性 transformSuccessData
  
• 提升redux性能

8.2.1

• Trigger onStoreCreated() after persist is done

• onStoreCreated()的触发时间推迟到persist恢复之后

8.2.0

• Support graphql request

• 支持Graphql请求

8.1.3

• Property compose support literal string default and redux-devtools

• compose选项支持字符串default和redux-devtools

const store = createReduxStore({
  compose: process.env.NODE_ENV === 'production' ? 'default' : 'redux-devtools',
});

8.1.2

• Deprecate patch method in taro
  
• Skip rejection if user doesn't handle catch in action
  
• metas and loadings respond wrong pick type
  
• Upgrade pkg immer to 7.0.9

• taro库中禁用patch请求
  
• 用户请求action不带catch时将不向下抛出异常
  
• 修复metas和loading的pick方法类型错误的问题
  
• 升级immer到7.0.9

8.1.0

[feat] Orphan request support custom successText, failText and hideError properties
[chore] Reduce bundle size

[特性] 独立请求支持自定义的 successText, failText 和 hideError 属性
[周边] 减小打包体积

8.0.1

[fix] PersistGate forget to call isCompressed
[chore] Update package tslib from 2.0.0 to 2.0.1
[chore] Reduce bundle size

[修复] 持久层组件忘记调用方法 isCompressed
[周边] 升级tslib包到2.0.1
[周边] 减小打包体积

8.0.0

[breaking] Rename method initReducer to initialState
[breaking] Rename method changeReducer to changeState
[breaking] Remove method resetReducer
[chore] Reduce bundle size

Easy to migrate from 7.x by replace method names globally through IDE.

[破坏] 重命名方法 initReducer 为 initialState
[破坏] 重命名方法 changeReducer 为 changeState
[破坏] 删除方法 resetReducer
[周边] 减小打包体积

通过代码编辑器的全局替换功能，您可以很容易地从7.x升级到该版本

7.3.0

[feat] Normal Action support afterSuccess

[特性] 普通Action支持afterSuccess的事件

class Test extends Model {
  t1 = this.action((state, payload: object) => {
    // ...
  }, {
    afterSuccess: (action) => {
      console.log(action.payload);
    },
    // duration: 1000,
  });
}

7.2.1

[type] Correctly fail action
[perf] Early returns for persist rehydrate
[perf] Reduce call getData() from twice to once

[类型] 修正失败action的类型
[优化] 处理reducer遇到持久化时立即返回
[优化] 减少元数据值调用次数

7.2.0

[feat] after subscribers can using duration now.
[feat] Persist with cache to against entry hot-reload.
[refactor] Reduce bundle size.

[特性] after 订阅事件增加延迟执行时间。
[特性] 持久层加入缓存机制以应对入口的热更新。
[重构] 优化打包尺寸

7.1.0

[feat] Model useData() support shallowEqual as the second parameter.
[feat] Http Service add config protperty throttleTransfer to handle cache key globally.
[refactor] Reduce bundle size.

[特性] 模型实例方法 useData() 第二个参数增加shallowEqual浅对比开关。
[特性] Http服务增加throttleTransfer的配置项，用于全局性地改变节流缓存依据。
[重构] 优化代码尺寸。

7.0.1

[fix] Taro H5 can't find Taro.getStorage
[fix] Taro throw error when storage key is not found
[feat] Function createReduxStore() prarmeter provide default value {}

[修复] Taro H5端无法直接使用 Taro.getStorage
[修复] Taro 在找不到缓存的情况下会抛出异常
[特性] 函数createReduxStore() 参数提供了默认值：{}

7.0.0

Breaking

• Depecrate @redux-model/web and @redux-model/react-native, use @redux-model/react instead.
• Required minimum taro version is v3.0.
• Required minimum vue version is v3.0.
• Rename Model.isLoading() to Model.useLoading().
• Persist storage engine should implements Promise now.
• HttpService provides generic for error data and never export HttpResponse for user.
• Throttle parameters convert to object option now.

Features

• Add ComposeAction to hold multiple request, that provides loading, useLoading, meta, useMeta methods.
• Throttle add transfer function.
• Provide new storage engine.
• Vue hooks.
• Vue PersistGate component for persist.
• Request-action and effects support afterPrepare, afterSuccess and afterFail to dispatch or execute other things.
• Update deps to latest.

6.9.2

[fix] Use builtin delete keyword to compatible with lower version device and browser

6.9.1

[fix] Query request doesn't work in react-native

6.9.0

[feat] Support dispatch action in action, I call it "sub action"

6.8.3

[fix] Compatible with taro http status and statusCode #6

6.8.2

[feat] Downgrade es6 syntax to support low version browser

6.8.0

[feat] New persist api to against compression
[feat] Persist data can be filtered by model now

6.7.10

[fix] Add type definition: clearThrottle(): void
[fix] Delete cache for toggle throttle

6.7.9

[fix] Clear throttle supported

class Test extends Model {
  getList = api.action(() => {
    return this.get('/api/').throttle(5000);
  });
}
const test = new Test();

// Clear by invoke method
test.getList.clearThrottle();

6.7.8

[fix:Taro] Use @tarojs/taro instead of react
[fix:Taro] Taro doesn't compile node_modules for h5 env

6.7.5

[fix:Taro] Format array query string to brackets type

6.7.4

[fix] Compare persist config before rehydrate

6.7.3

[fix] Get correct reducer name for instance one class several times

6.7.2

[fix] Don't check register before store is created

6.7.1

[refactor] Improve performance of persist

6.7.0

[feat] Add persist for reducer

Breaking Changes

Rename cache() to throttle() in chains of request action

6.6.0

[feat] Request actions always have meta or metas

6.5.11

[fix] changeReducer() bind wrong instance name

6.5.6

[feat] Lazy meta to improve performance

6.5.2

[fix] Ignore additional options from service for cache

6.5.0

[feat] Add cache option to request action

6.4.2

[fix] Redux state doesn't trigger observer in vue

6.4.0

[feat] The parameter of createReduxStore changed as object config

6.3.0

[feat] Add methods clone,isSuccess,transformSuccessData into HttpService

6.2.0

[feat] New property withMeta of request action to replace metaKey

6.1.3

[fix] Compatible with compression in dev environment

6.1.2

[fix] Correctly request method

6.1.1

[feat] Exchange service method name and uri property
[fix] Missing inject generics
[fix] Add method chain hideError

6.0.0

Breaking Changes

Totally rewrite request action to reduce more code

5.12.0

[feat] Combine actionRequest and actionNormal into action

5.11.0

Breaking Changes

[feat] Rename property from meta to metaKey when creating request action