Redux

README.md

@@ -1,31 +1,51 @@
 # react-cli
+node 15+
 react-typescript-router-mobx-redux-hook
+```html
+main 分支为 路由版本
+redux 分支为 redux 结构
+mobx 分支为 mobx 结构代码 补充中...
+rematch 分支为reamatch 结构代码 补充中...
+整体在维护中
+```
+> 切换到分支 redux 可以看到完整redux 搭建的代码
 
-#### step1
-```cmd
-eg:
-mv react-cli/tpl react-cli/projectName
 
-eg
+## step1
+```cmd
+把demo 文件改成自己需要的项目名，然后移动。后期会维护一步创建.
+```
+##### step1-1
+```cmd
+进入文件夹:
 cd react-cli
+```
+##### step1-2
+```cmd
 改名
 mv tpl candy-react
-移动
+```
+##### step1-3
+```cmd
+移动到上一级
 mv tpl ../
+```
+##### step1-4
+```cmd
+退出当前文件夹
 cd ..
 rm -rf react-cli
 ```
-
-#### step2
-
+## step2
 ```cmd
 node -v
 v14.15.3
 yarn config get registry
 yarn config set registry http://registry.npm.taobao.org/
 ```
 
-#### step3
+## step3
 ```cmd
-
+yarn
+yarn start
 ```

read/md/redux.md

@@ -0,0 +1,8 @@
+yarn add @types/react-redux react-redux redux redux-thunk
+
+目录创建 未完成
+1、servers
+2、epics
+3、helpers
+4、untils
+5、enums

tpl/package.json

@@ -15,6 +15,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.3.2",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
@@ -65,8 +66,11 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.3",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.3.0",
+    "redux": "^4.1.2",
+    "redux-thunk": "^2.4.0",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^10.0.5",
@@ -169,5 +173,7 @@
   "devDependencies": {
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.1"
-  }
+  },
+  "author": "llqfront@aliyun.com",
+  "license": "ISC"
 }

tpl/src/App.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
 
 import { BrowserRouter, HashRouter} from 'react-router-dom';
+import {Provider} from 'react-redux';
 
-import Router from '@/router/';
+import RootStore from '@/stores';
+import Router from '@/router';
 
+const unsubscribe = RootStore().subscribe(() =>{
+  // console.log(Store.getState())
+  localStorage.setItem("LJMRoot", JSON.stringify(RootStore().getState()));
+})
+//
+function newJson(str){
+    var json = (new Function("return " + str))();
+    return json;
+}
+let prevStore = newJson(localStorage.getItem("LJMRoot"))||{};
 const App = () => (
     <BrowserRouter>
-        <Router/>
+        <Provider store={RootStore(prevStore)}>
+            <Router/>
+        </Provider>
     </BrowserRouter>
 )
 export default App;

tpl/src/actions/add.ts

@@ -0,0 +1,3 @@
+const NAMESPACE = 'ADDPAGE/';
+export const FETCH_USER = `${NAMESPACE}/FETCH_USER`;
+export const FETCH_USER_FULFILLED = `${NAMESPACE}/FETCH_USER_FULFILLED`;

tpl/src/actions/ajaxpage.ts

@@ -0,0 +1,3 @@
+const NAMESPACE = 'ADDPAGE/';
+export const GETPDD = `${NAMESPACE}/GETPDD`;
+export const PDDDATA = `${NAMESPACE}/PDDDATA`;

tpl/src/actions/index.ts

@@ -0,0 +1,9 @@
+import * as actionAdd from './add';
+import * as actionOld from './old';
+import * as actionAjaxPage from './ajaxpage';
+
+export {
+    actionAdd,
+    actionOld,
+    actionAjaxPage
+}

tpl/src/actions/old.ts

@@ -0,0 +1,4 @@
+const NAMESPACE = 'OLDPAGE/';
+export const ADD_TODO = `${NAMESPACE}/ADD_TODO`;
+export const DEL_TODO = `${NAMESPACE}/DEL_TODO`;
+export const EDIT_TODO = `${NAMESPACE}/EDIT_TODO`;

tpl/src/doc/readme.md

@@ -0,0 +1,11 @@
+目录介绍：
+- components:
+- doc:
+- enums:
+- epics:
+- images:
+- router:
+- services:
+- stores:
+- utils:
+- views:

tpl/src/reducers/addPageReducer.ts

@@ -0,0 +1,14 @@
+import { actionAdd } from '@/actions';
+
+
+export default (state = {},action)=>{
+    switch (action.type) {
+      case actionAdd.FETCH_USER_FULFILLED:
+        return {
+          ...state,
+          success:action.payload
+        };
+      default:
+        return state;
+    }
+}

tpl/src/reducers/ajaxPageReducer.ts

@@ -0,0 +1,14 @@
+import { actionAjaxPage } from '@/actions';
+
+export default (state = {}, action)=>{
+    switch (action.type) {
+        case actionAjaxPage.PDDDATA:
+            return {
+                ...state,
+                action
+            };
+        default:
+            return state;
+    }
+
+}

tpl/src/reducers/index.ts

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+import addReducer from './addPageReducer';
+import oldReducer from './oldPageReducer';
+import ajaxReducer from './ajaxPageReducer';
+
+const rootReducer = combineReducers({
+    addReducer,
+    oldReducer,
+    ajaxReducer
+})
+export default rootReducer;

tpl/src/reducers/oldPageReducer.ts

@@ -0,0 +1,17 @@
+import { actionOld } from '@/actions';
+
+export default (state=[],action)=>{
+    switch (action.type) {
+        case actionOld.ADD_TODO:
+            return [
+                {
+                    type:action.type,
+                    text:action.type
+                },
+                ...state
+            ]
+        default:
+            return state;
+    }
+
+}

tpl/src/router/index.tsx

@@ -2,15 +2,17 @@ import React , { Component,Suspense} from 'react';
 import { lazy } from '@loadable/component';
 import {NavLink,Redirect,Switch,Route} from 'react-router-dom';
 const Home = lazy(() => import('@/views/Home'));
-const Test = lazy(() => import('@/views/Test'));
+const Action = lazy(() => import('@/views/Action/index.tsx'));
+const AjaxPage = lazy(() => import('@/views/AjaxPage/index.tsx'));
 class Router extends Component {
     render(){
         return(
             <React.Fragment>
                 <Suspense fallback={<div>Loading...</div>}>
                     <Switch>
                         <Route exact path="/" component={Home} />
-                        <Route exact path="/test" component={Test} />
+                        <Route path="/action" component={Action} />
+                        <Route path="/ajaxpage" component={AjaxPage} />
                         <Redirect to="/"/>
                     </Switch>
                 </Suspense>

tpl/src/services/index.ts

@@ -0,0 +1,5 @@
+import * as pddApi from './pddService.ts';
+
+export {
+    pddApi,
+}

tpl/src/services/pddService.ts

@@ -0,0 +1,5 @@
+import { ajaxs } from '@/utils';
+
+export const pddFnApi = (params)=>{
+    return ajaxs.getApi2('/home/mediareports',params)
+}

tpl/src/setupProxy.js

@@ -2,13 +2,7 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 module.exports = function(app) {
     app.use(
       '/home',createProxyMiddleware({
-        target: 'https://####.com/',
-        changeOrigin: true,
-      })
-    );
-    app.use(
-      '/api',createProxyMiddleware({
-        target: 'http://####.cn/',
+        target: 'https://home-api.pinduoduo.com/',
         changeOrigin: true,
       })
     );

tpl/src/stores/index.ts

@@ -0,0 +1,21 @@
+import {createStore, applyMiddleware} from 'redux';
+import thunk from 'redux-thunk';
+
+import rootReducer from '@/reducers';
+
+const configureStore = (prevStore)=> {
+    const store = createStore(
+        rootReducer,
+        prevStore,
+        applyMiddleware(thunk)
+    );
+    return store;
+}
+let store = configureStore();
+
+const RootStore = (prevStore?) =>{
+    store = configureStore(prevStore);
+    return store;
+}
+
+export default RootStore;

tpl/src/utils/ajax.ts

@@ -0,0 +1,86 @@
+import axios from 'axios';
+import qs from 'qs';
+export const getApi = async(ajaxCfg)=>{
+    let data = await axios.get(
+    ajaxCfg.url,{
+        params:ajaxCfg.cfg
+    },
+    {
+        headers: ajaxCfg.headers,
+    })
+    return data;
+}
+export const getApi2 = async(url,cfg,headers)=>{
+    let data = await axios.get(
+    url,{
+        params:cfg
+    },
+    {
+        headers: headers,
+    })
+    return data;
+}
+//     async postApi(url,cfg,headers){
+//         let fd = new FormData();
+//         for(let key in cfg){
+//             fd.append(key, cfg[key]);
+//         }
+//         let	data = await axios.post(url,fd,
+//         {
+//             headers: headers
+//         })
+//         return data;
+//     },
+//     async putApi(url,cfg,headers){
+//         let	data = await axios.put(url,qs.stringify(cfg),{
+//             headers: {
+//                 'Content-Type':'application/x-www-form-urlencoded',
+//             }
+//         })
+//         return data;
+//     },
+//     async _postApi(url,cfg,headers){
+//         let	data = await axios.post(url,cfg,
+//         {
+//             headers: headers
+//         })
+//         return data;
+//     },
+//     async __postApi(url,cfg,headers){
+//         let	data = await axios.post(url,qs.stringify(cfg),{
+//             headers: {
+//                 'Content-Type':'application/x-www-form-urlencoded',
+//             }
+//         })
+//         return data;
+//     },
+//     async delApi(url,cfg,headers){
+//         let	data = await axios.delete(url,{params:cfg},{
+//             headers: headers
+//         })
+//         return data;
+//     },
+//     async requestApi(cfg,headers,file){
+//        let fd = new FormData();
+//        fd.append('param', JSON.stringify(cfg));
+//        if(file){
+//            // 上传证明
+//            if(file.length){
+//                for(let i=0,len=file.length;i<len;i++){
+//                    fd.append('files', file[i]);
+//                }
+//            }else {
+//                // 单个上传
+//                for(let key in file){
+//                    fd.append(key, file[key]);
+//                }
+//            }
+//        }
+//        let	data = await axios.post('/batch',fd,
+//        {
+//            headers: headers
+//        })
+//        return data;
+//    }
+// }
+// export default Unit;