Use @redux-model/react which is next model

Author: fwh1990

package.json

@@ -8,7 +8,7 @@
     "build": "webpack-genius build --env production"
   },
   "dependencies": {
-    "@redux-model/web": "^6.9.1",
+    "@redux-model/react": "^7.0.0-beta.13",
     "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -24,6 +24,6 @@
     "@types/redux-logger": "^3.0.7",
     "redux-logger": "^3.0.6",
     "typescript": "^3.7.4",
-    "webpack-genius": "^4.13.2"
+    "webpack-genius": "^4.13.7"
   }
 }

src/components/App.styl

@@ -1,8 +1,3 @@
 .wrapper
   flex-direction: row
   display: flex
-
-:global
-  #react-refresh-overlay
-    display: none !important
-

src/components/Request.tsx

@@ -1,10 +1,15 @@
 import React, { FunctionComponent, useCallback } from 'react';
 import { npmInfoModel } from '../models/NpmInfoModel';
 import styles from './Request.less';
+import { Model } from '@redux-model/react';
 
 const Request: FunctionComponent = () => {
   const npmInfo = npmInfoModel.useData();
-  const loading = npmInfoModel.manage.useLoading();
+
+  const loading = Model.useLoading(
+    npmInfoModel.manage.useLoading(),
+    npmInfoModel.combo.useLoading(),
+  );
 
   const handleClick = useCallback(() => {
     npmInfoModel.manage('react-native')
@@ -18,7 +23,9 @@ const Request: FunctionComponent = () => {
   }, []);
 
   const handleClick2 = useCallback(() => {
-    npmInfoModel.manage('not-existed-package');
+    npmInfoModel.combo('not-existed-package').catch((e) => {
+      alert(e.message);
+    });
   }, []);
 
   const handleReset = useCallback(() => {

src/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 import { Provider } from 'react-redux';
-import { applyMiddleware, compose, Middleware } from 'redux';
+import { Middleware } from 'redux';
 import App from './components/App';
-import { createReduxStore, PersistGate } from '@redux-model/web';
+import { createReduxStore, PersistGate } from '@redux-model/react';
 import { createLogger } from 'redux-logger';
 import { summaryModel } from './models/SummaryModel';
 
@@ -16,15 +16,12 @@ const rootMiddleWares: Middleware[] = [
 ];
 
 const store = createReduxStore({
-  reducers: {
-    ...summaryModel.register(),
-  },
-  enhancer: compose(applyMiddleware(...rootMiddleWares)),
+  middleware: rootMiddleWares,
   persist: {
-    version: '0.0.1',
+    version: '0.0.2',
     key: 'demo-react-hooks',
-    storage: localStorage,
-    whitelist: {
+    storage: 'local',
+    allowlist: {
       summaryModel,
     },
   },

src/libraries/httpService/$api.ts

@@ -1,6 +1,6 @@
-import { HttpResponse, HttpService } from '@redux-model/web';
+import { HttpService } from '@redux-model/react';
 
-export const $api = new HttpService({
+export const $api = new HttpService<{ error: string, reason: string }>({
   baseUrl: 'https://registry.npm.taobao.org',
   headers: () => {
     return {
@@ -15,16 +15,16 @@ export const $api = new HttpService({
 
     return true;
   },
-  onRespondError: (response: HttpResponse<{ error: string, reason: string }>, transform) => {
+  onRespondError: (response, transform) => {
     if (response.data && response.data.reason) {
       transform.message = response.data.reason;
     }
   },
-  onShowSuccess: (successText: string) => {
+  onShowSuccess: (successText) => {
     console.info(successText);
     alert(successText);
   },
-  onShowError: (errorText: string) => {
+  onShowError: (errorText) => {
     console.error(errorText);
     alert(errorText);
   },

src/models/CounterModel.ts

@@ -1,4 +1,4 @@
-import { Model } from '@redux-model/web';
+import { Model } from '@redux-model/react';
 
 type Data = {
   amount: number;

src/models/NpmInfoModel.ts

@@ -1,5 +1,6 @@
-import { Model } from '@redux-model/web';
+import { Model } from '@redux-model/react';
 import { $api } from '../libraries/httpService/$api';
+import { counterModel } from './CounterModel';
 
 interface Response {
   _id: string;
@@ -16,10 +17,13 @@ class NpmInfoModel extends Model<Data> {
       .throttle(1000)
       .onSuccess((_, action) => {
         return action.response;
+      })
+      .afterSuccess(() => {
+        counterModel.increase();
       });
   });
 
-  async combo(packageName: string) {
+  combo = this.compose(async (packageName: string) => {
     const info = await $api.getAsync<Response>({
       uri: '/' + packageName,
       query: {
@@ -30,7 +34,7 @@ class NpmInfoModel extends Model<Data> {
     this.changeReducer((state) => {
       state.homepage = info.response.homepage;
     });
-  }
+  });
 
   reset = this.action(() => {
     return {};

src/models/SummaryModel.ts

@@ -1,4 +1,4 @@
-import { Effects, Model } from '@redux-model/web';
+import { Effects, Model } from '@redux-model/react';
 import { counterModel } from './CounterModel';
 import { npmInfoModel } from './NpmInfoModel';