redux http websocket

config/dev.js

@@ -1,3 +1,5 @@
+const target = 'http://localhost:9999';
+
 module.exports = {
   env: {
     NODE_ENV: '"development"'
@@ -5,5 +7,17 @@ module.exports = {
   defineConstants: {
   },
   mini: {},
-  h5: {}
+  h5: {
+    devServer: {
+      host: '0.0.0.0',
+      port: 10086,
+      // 设置代理来解决 H5 请求的跨域问题
+      proxy: {
+        '/api': {
+          target,
+          changeOrigin: true
+        }
+      }
+    }
+  }
 }

config/index.js

@@ -1,14 +1,25 @@
+const path = require('path')
+
 const config = {
+  alias: {
+    '@/api': path.resolve(__dirname, '..', 'src/api'),
+    '@/pages': path.resolve(__dirname, '..', 'src/pages'),
+    '@/components': path.resolve(__dirname, '..', 'src/components'),
+    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
+    '@/store': path.resolve(__dirname, '..', 'src/store'),
+    '@/utils': path.resolve(__dirname, '..', 'src/utils')
+  },
   projectName: 'texas-poker-front',
   date: '2023-1-6',
-  designWidth: 750,
+  designWidth: 428, // 750,
   deviceRatio: {
     640: 2.34 / 2,
     750: 1,
-    828: 1.81 / 2
+    828: 1.81 / 2,
+    428: 750 / 428
   },
   sourceRoot: 'src',
-  outputRoot: 'dist',
+  outputRoot: `dist/${process.env.TARO_ENV}`,
   plugins: [],
   defineConstants: {
   },

jsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@/api/*": ["./src/api/*"],
+        "@/pages/*": ["./src/pages/*"],
+        "@/store/*": ["./src/store/*"],
+        "@/components/*": ["./src/components/*"],
+        "@/utils/*": ["./src/utils/*"],
+        "@/assets/*": ["./src/assets/*"],
+      }
+    }
+  }
+  

package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@babel/runtime": "^7.7.7",
     "@nutui/nutui-react-taro": "^1.4.2",
+    "@reduxjs/toolkit": "^1.9.1",
     "@tarojs/components": "3.5.11",
     "@tarojs/helper": "3.5.11",
     "@tarojs/plugin-framework-react": "3.5.11",
@@ -46,9 +47,11 @@
     "@tarojs/shared": "3.5.11",
     "@tarojs/taro": "3.5.11",
     "@tarojs/taro-h5": "3.5.11",
+    "promise.prototype.finally": "^3.1.4",
     "protobufjs": "^7.1.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-redux": "^8.0.5",
     "sr-sdk-h5": "^1.3.1"
   },
   "devDependencies": {

src/api/api.js

@@ -0,0 +1,5 @@
+import { get, post } from '@/api/http'
+
+export const login = params => post('/api/auth/authorize', params)
+
+export const fetchOpMap = () => get('/api/conn/opMap')

src/api/http.js

@@ -0,0 +1,64 @@
+import Taro from '@tarojs/taro'
+import { getStorage } from '@/utils/storage';
+import { reLaunch } from '@/utils/application'
+
+const hosts = {
+    [Taro.ENV_TYPE.WEB]: '', // h5 使用 devServer 代理
+    // [Taro.ENV_TYPE.WEB]: 'http://localhost:9999', // h5 使用 devServer 代理
+    // [Taro.ENV_TYPE.WEAPP]: 'http://localhost:8888', // 小程序指定 host 访问
+}
+const host = hosts[Taro.getEnv()];
+
+// urlencoded格式拼接请求参数
+function objUrlEncode(params) {
+    let data = !params ? '' : Object.keys(params).reduce((param, key) => {
+        if (params[key] === null || params[key] === undefined || params[key] === '') {
+            return param;
+        }
+        return param + encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&';
+    }, '');
+    return data.substring(0, data.length - 1);
+}
+
+// Http GET 请求
+const fetch = function (method, url, params) {
+    const token = getStorage('user_token');
+    return new Promise(function (resolve, reject) {
+        try {
+            const data = objUrlEncode(params);
+            Taro.request({
+                url: host + url,
+                method,
+                data,
+                header: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Authorization': token
+                },
+                dataType: 'json',
+                timeout: 5000,
+                retryTimes: 0,
+                complete(res) {
+                    if (res.statusCode === 401 || res.statusCode === 403 || res.statusCode === 422) {
+                        // 跳登录
+                        reLaunch({
+                            url: "/pages/login/login"
+                        })
+                    }
+
+                    if (res.statusCode !== 200 || !res.data || res.data.code !== 200) {
+                        return reject(res.data || {});
+                    }
+                    resolve(res.data);
+                },
+            });
+        } catch (e) {
+            reject({ code: 400, message: e.message || '网络错误' });
+        }
+    })
+}
+
+export const get = (url, params) => fetch('GET', url, params);
+
+export const post = (url, params) => fetch('POST', url, params);
+
+export const serverHost = host;

src/api/websocket.js

@@ -0,0 +1,74 @@
+import { api } from '@/api/proto'
+import { showRedPackage } from '@tarojs/taro-h5';
+
+const websocket = {
+  conn: null,
+  opMap: {},
+  state: 0, // 0未初始,1打开,2关闭
+  seq: 1, // 消息序号
+  init(token, opMap) {
+    if (opMap) {
+      this.opMap = opMap;
+    }
+    // websocket test
+    const ws = new WebSocket("ws://localhost:9999/api/conn/ws")
+    this.conn = ws
+    console.log(this)
+    ws.binaryType = 'arraybuffer'
+    ws.onopen = (e) => {
+      // 连接后立即认证连接
+      const req = api.ReqIdentity.create({ token })
+      // const reqBuffer = api.ReqIdentity.encode(req).finish()
+      this.send(req)
+    }
+    ws.onmessage = (e) => {
+      console.log('msg:', e.data)
+      const wrap = api.ProtoWrap.decode(new Uint8Array(e.data))
+      const res = api.ResIdentity.decode(wrap.body)
+      if (wrap.seq !== 0) {
+        // 对应请求callback
+        const waitCall = this.waitCall[wrap.req]
+        if (waitCall) {
+          waitCall.onRes(res)
+          return;
+        }
+      }
+      // 找消息类型的listen执行
+      const listener = this.msgListener[wrap.op]
+      if (listener) {
+        listener(res)
+      }
+      // console.log(wrap.op, res)
+    }
+    ws.onerror = (a, b, c) => {
+      console.log('error:', a, b, c)
+    }
+    ws.onclose = e => {
+      console.log('close', e)
+    }
+  },
+
+  waitCall: {}, // 等待响应的 callback 列表
+  send(msg, resCall, errCall) {
+    const msgBufer = msg.constructor.encode(msg).finish();
+    const wrap = api.ProtoWrap.create({ ver: 1, op: 13578 + 3, seq: this.seq++, body: msgBufer });
+    const wrapBuffer = api.ProtoWrap.encode(wrap).finish();
+    this.conn.send(wrapBuffer);
+    if (resCall) {
+      this.waitCall[wrap.seq] = {
+        seq: wrap.seq,
+        onRes: resCall,
+        onError: errCall,
+      }
+    }
+    // 定时检查是否超时...
+  },
+
+  msgListener: {},
+  // 监听消息类型
+  listen(type, call) {
+
+  },
+}
+
+export default websocket

src/app.js

@@ -1,8 +1,14 @@
 import { Component } from 'react'
 import SDK from 'sr-sdk-h5'
 
+import { Provider } from 'react-redux'
+import store from './store'
+
 import './app.scss'
-import '@nutui/nutui-react-taro/dist/style.css'
+
+// IOS Promise finally 兼容
+const promiseFinally = require('promise.prototype.finally');
+promiseFinally.shim();
 
 /**
    * 有数埋点SDK 默认配置
@@ -10,7 +16,7 @@ import '@nutui/nutui-react-taro/dist/style.css'
    * 如对有数SDK埋点接入有任何疑问，请联系微信：sr_data_service
    */
 
- window.srt = new SDK({
+window.srt = new SDK({
 
   /**
    * 有数 - ka‘接入测试用’ 分配的 app_id，对应的业务
@@ -59,15 +65,20 @@ import '@nutui/nutui-react-taro/dist/style.css'
 // window.srt.setUser({user_id: 'xxx'}) // 设置用户信息，用户信息将会被设置在props.wx_user对象中
 
 class App extends Component {
-  componentDidMount () {}
+  componentDidMount() { }
 
-  componentDidShow () {}
+  componentDidShow() { }
 
-  componentDidHide () {}
+  componentDidHide() { }
 
   // this.props.children 是将要会渲染的页面
-  render () {
+  render() {
-    return this.props.children
+    return (
+      <Provider store={store}>
+        {this.props.children}
+      </Provider>
+    )
+
   }
 }
 

src/app.scss

@@ -0,0 +1,9 @@
+
+@import "@nutui/nutui-react-taro/dist/style.css";
+
+body {
+  font-size: 16px;
+  max-width: 800Px;
+  margin: 0 auto;
+  background: #F5F5F5;
+}

src/components/style/title.scss

@@ -0,0 +1,46 @@
+.page-top{
+    width: 100%;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    .topHeight{
+        width: 100%;
+        height: 88px;
+    }
+    .page-title{
+        padding: 0 32px;
+        height: 88px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: bold;
+        .icon{
+            width: 40px;
+            height: 40px;
+            font-size: 40px;
+        }
+        .title{
+            font-size: 34px;
+            color: #ffffff;
+        }
+        .title1{
+            font-size: 34px;
+            color: #000000;
+        }
+        .blank{
+            width: 48px;
+            height: 48px;
+        }
+    }
+}
+.hidden{
+    height: 88px; //176px;
+    width: 100%;
+    opacity: 0;
+    // background: pink;
+}
+
+.bgc{
+    background-color: #fff;
+}

src/components/title.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+// import { AtIcon } from 'taro-ui'
+import { Icon } from '@nutui/nutui-react-taro';
+import { navigateBack } from '@/utils/application'
+import './style/title.scss'
+
+function Title(props) {
+  return (
+    <View>
+      <View className={props.bgColor ? "page-top bgc" : "page-top"}>
+        {/* <View className='topHeight'></View> */}
+        <View className='page-title'>
+          {
+            props.nullBank ?
+              <View className='blank'></View> :
+              <Icon onClick={() => navigateBack()} className='icon' name='rect-left' color={props.colorStyle ? "#ffffff" : "#000000"} />
+          }
+          <View className={props.colorStyle ? "title" : "title1"}>{props.title}</View>
+          <View className='blank'></View>
+        </View>
+      </View>
+      {props.topNull ? '' : <View className='hidden'></View>}
+    </View>
+  )
+}
+
+export default Title

src/pages/lobby/lobby.jsx

@@ -1,13 +1,40 @@
 import React, { Component, useState } from 'react'
-import {View, Text} from '@tarojs/components'
+import { View, Text, Button } from '@tarojs/components'
+
+import { useSelector, useDispatch } from 'react-redux'
 
 import './lobby.scss'
+import { increment } from '@/store/index'
+import { fetchOpMap } from '@/api/api'
+import Title from '@/components/title'
+
+// class Lobby extends Component {
+//     constructor(props) {
+//         super(props)
+//         console.log('lobby', props)
+//     }
+//     render() {
+//         return (
+//             <View>
+//                 <Text>Lobby!!</Text>
+//                 <Button>increment</Button>
+//             </View>
+//         )
+//     }
+// }
 
 function Lobby() {
+  const count = useSelector((state) => state.counter.value)
+  const dispatch = useDispatch()
+  fetchOpMap()
+    .then(res => { console.log(res) })
+    .catch(err => console.log(err))
 
   return (
     <View>
-            <Text>Lobby!!</Text>
+      <Title title="Lobby" bgColor={true}  />
+      <Text>Lobby!! {count}</Text>
+      <Button type="primary" onClick={() => dispatch(increment())}>increment</Button>
     </View>
   )
 }

src/pages/login/login.jsx

@@ -1,9 +1,9 @@
 import React, { Component, useState } from 'react'
-import {View, Text} from '@tarojs/components'
+import {View, Text, Input, Image, Button} from '@tarojs/components'
-import { Progress } from '@nutui/nutui-react-taro';
+import Taro from '@tarojs/taro';
-import { Form, Input, TextArea, Cell, Button, Row, Col, Image } from '@nutui/nutui-react-taro';
+//import { Progress } from '@nutui/nutui-react-taro';
-import { api } from '../../proto'
+//import { Form, Input, TextArea, Cell, Button, Row, Col, Image } from '@nutui/nutui-react-taro';
-
+import ws from '@/api/websocket'
 import './login.scss'
 
 /*
@@ -16,7 +16,6 @@ function Login(props, ref) {
   // console.log(buffer)
   // let decoded = message.Proto.decode(buffer);
   // console.log(decoded)
-  console.log(api)
 
     const [state, setState] = useState({
       username: '',
@@ -24,8 +23,8 @@ function Login(props, ref) {
       captcha: '',
     });
     const [capatcha, setCapatcha] = useState({
-      origin: "http://localhost:7788/app/captcha",
+      origin: "http://localhost:9999/api/auth/captcha",
-      src: "http://localhost:7788/app/captcha",
+      src: "http://localhost:9999/api/auth/captcha",
     })
     const usernameChange = (username, e) => {
       if (!e) return;
@@ -39,41 +38,17 @@ function Login(props, ref) {
     }
     const handleSubmit = () => {
       console.log('submit', state)
-      // websocket test
-      const ws = new WebSocket("ws://localhost:9999/ws")
-      ws.binaryType = 'arraybuffer'
-      ws.onopen = (e) => {
-        // 连接后立即认证连接
       const token = "AgOjcdf3goeYDX3lwWWwkXtVpcrL-l2rX8csrRKgs3_-BC3JOx0l6nZU0MV25eIn"
-        const req = api.ReqIdentity.create({token})
+      ws.init(token)
-        const reqBuffer = api.ReqIdentity.encode(req).finish()
-        const wrap = api.ProtoWrap.create({ver:1, op: 13578 + 3, seq:1, body: reqBuffer})
-        const wrapBuffer = api.ProtoWrap.encode(wrap).finish()
-        ws.send(wrapBuffer)
-        console.log('send', req, wrap)
-      }
-      ws.onmessage = (e) => {
-          console.log('msg:', e.data)
-          const wrap = api.ProtoWrap.decode(new Uint8Array(e.data))
-          const res = api.ResIdentity.decode(wrap.body)
-          console.log(wrap.op, res)
-      }
-      ws.onerror = (a,b,c) => {
-          console.log('error:', a, b, c)
-      }
-      ws.onclose = e => {
-        console.log('close', e)
-      }
     }
     return (
       <View className='login'>
         <Text>Hello Login Page!</Text>
-        <Progress percentage="33" />
+        {/* <Progress percentage="33" /> */}
-        <Row>
+        <View>
-          <Col span="4"></Col>
+          <Input name="username" type="text" defaultValue={state.username}  placeholder="文本" leftIcon="dongdong"
-          <Col span="20"><Input name="username" type="text" defaultValue={state.username}  placeholder="文本" leftIcon="dongdong"
+              onChange={usernameChange}/>
-            onChange={usernameChange}/></Col>
+        </View>
-        </Row>
         <View className='input-1'>
           <Input name="password" type="password" defaultValue={state.password}  placeholder="文本"
             onChange={passwordChange}/>
@@ -83,6 +58,7 @@ function Login(props, ref) {
         </View>
         <View className='input-1'>
           <Button type="primary" style={{width: '160px'}} onClick={handleSubmit}>提交</Button>
+          <Button type="primary" style={{width: '160px'}} onClick={() => {Taro.navigateTo({url:'/pages/lobby/lobby'})}}>跳转</Button>
         </View>
       </View>
     )

src/store/index.js

@@ -0,0 +1,23 @@
+import { configureStore, combineReducers, createSlice } from '@reduxjs/toolkit'
+
+const counterSlice = createSlice({
+    name: 'counter',
+    initialState: { value: 0 },
+    reducers: {
+        increment: state => {
+            state.value += 1
+        },
+        incrementByAmount: (state, action) => {
+            state.value += action.payload
+        }
+    }
+})
+
+const store = configureStore({
+    reducer: {
+        counter: counterSlice.reducer
+    }
+})
+
+export default store
+export const { increment, decrement, incrementByAmount } = counterSlice.actions

src/utils/application.js

@@ -0,0 +1,55 @@
+import Taro, { getCurrentInstance as taroInstance } from '@tarojs/taro'
+
+// 滚动条置顶
+function returnTop() {
+  var ele = document.querySelector('.taro-tabbar__panel')
+  // console.log(ele.scrollTop)
+  if (ele) {
+    ele.scrollTop = 0
+  }
+}
+
+// 获取当前实例对象，官方文档建议只获取一次
+export const getInstance = (function () {
+  let $router = null;
+  return function () {
+    if (!$router) {
+      $router = taroInstance();
+    }
+    return $router;
+  }
+}());
+
+// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 https://taro-docs.jd.com/taro/docs/apis/route/switchTab
+export const switchTab = function(option) {
+  returnTop()
+  return Taro.reLaunch(option);
+}
+
+// 关闭所有页面，打开到应用内的某个页面
+export const reLaunch = function(option) {
+  returnTop()
+  return Taro.reLaunch(option);
+}
+
+// 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
+export const redirectTo = function(option) {
+  returnTop()
+  return Taro.redirectTo(option);
+}
+
+// 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。小程序中页面栈最多十层
+export const navigateTo = function(option) {
+  returnTop()
+  return Taro.navigateTo(option);
+}
+
+// 返回之前的页面，如果跳转层数大于路由堆栈
+export const navigateBack = function(option = {delta: 1}) {
+  const pages = Taro.getCurrentPages();
+  console.log('default back', pages)
+  if (option.delta > pages.length - 1) {
+    return Taro.redirectTo({url: option.url || '/pages/lobby/lobby'});
+  }
+  return Taro.navigateBack(option);
+}

src/utils/storage.js

@@ -0,0 +1,24 @@
+import Taro from '@tarojs/taro'
+
+export function setStorage(key, value){
+    // return  localStorage.setItem('user_token', token)
+    try {
+       return Taro.setStorageSync(key, value)
+    } catch (e) { }
+}
+
+export function getStorage(key){
+    // return localStorage.getItem('user_token')
+    try {
+        return Taro.getStorageSync(key)
+    } catch (e) {
+    // Do something when catch error
+    }
+}
+
+export function removeStorage(key){
+    try {
+        return Taro.removeStorageSync(key)
+    } catch (e) {
+    }
+}

yarn.lock

@@ -1092,7 +1092,7 @@
     core-js-pure "^3.25.1"
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.14.5", "@babel/runtime@^7.16.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.14.5", "@babel/runtime@^7.16.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.20.7"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
   integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@@ -1448,6 +1448,16 @@
     "@react-spring/shared" "~9.6.1"
     "@react-spring/types" "~9.6.1"
 
+"@reduxjs/toolkit@^1.9.1":
+  version "1.9.1"
+  resolved "https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-1.9.1.tgz#4c34dc4ddcec161535288c60da5c19c3ef15180e"
+  integrity sha512-HikrdY+IDgRfRYlCTGUQaiCxxDDgM1mQrRbZ6S1HFZX5ZYuJ4o8EstNmhTwHdPl2rTmLxzwSu0b3AyeyTlR+RA==
+  dependencies:
+    immer "^9.0.16"
+    redux "^4.2.0"
+    redux-thunk "^2.4.2"
+    reselect "^4.1.7"
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -2053,6 +2063,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2137,7 +2155,7 @@
   resolved "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react@^18.0.0":
+"@types/react@*", "@types/react@^18.0.0":
   version "18.0.26"
   resolved "https://registry.npmmirror.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
   integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
@@ -2185,6 +2203,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/vinyl@^2.0.4":
   version "2.0.7"
   resolved "https://registry.npmmirror.com/@types/vinyl/-/vinyl-2.0.7.tgz#9739a9a2afaf9af32761c54a0e82c735279f726c"
@@ -6811,6 +6834,13 @@ hls.js@^1.1.5:
   resolved "https://registry.npmmirror.com/hls.js/-/hls.js-1.2.9.tgz#2f25e42ec4c2ea8c88ab23c0f854f39062d45ac9"
   integrity sha512-SPjm8ix0xe6cYzwDvdVGh2QvQPDkCYrGWpZu6bRaKNNVyEGWM9uF0pooh/Lqj/g8QBQgPFEx1vHzW8SyMY9rqg==
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -7043,6 +7073,11 @@ image-size@~0.5.0:
   resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
+immer@^9.0.16:
+  version "9.0.17"
+  resolved "https://registry.npmmirror.com/immer/-/immer-9.0.17.tgz#7cfe8fbb8b461096444e9da7a5ec4a67c6c4adf4"
+  integrity sha512-+hBruaLSQvkPfxRiTLK/mi4vLH+/VQS6z2KJahdoxlleFOI8ARqzOF17uy12eFDlqWmPoygwc5evgwcp+dlHhg==
+
 immutable@^4.0.0:
   version "4.2.1"
   resolved "https://registry.npmmirror.com/immutable/-/immutable-4.2.1.tgz#8a4025691018c560a40c67e43d698f816edc44d4"
@@ -10242,6 +10277,15 @@ promise-polyfill@^7.1.0:
   resolved "https://registry.npmmirror.com/promise-polyfill/-/promise-polyfill-7.1.2.tgz#ab05301d8c28536301622d69227632269a70ca3b"
   integrity sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ==
 
+promise.prototype.finally@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.npmmirror.com/promise.prototype.finally/-/promise.prototype.finally-3.1.4.tgz#4e756a154e4db27fae24c6b18703495c31da3927"
+  integrity sha512-nNc3YbgMfLzqtqvO/q5DP6RR0SiHI9pUPGzyDf1q+usTwCN2kjvAnJkBb7bHe3o+fFSBPpsGMoYtaSi+LTNqng==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -10400,11 +10444,16 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-reconciler@0.27.0:
   version "0.27.0"
   resolved "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
@@ -10413,6 +10462,18 @@ react-reconciler@0.27.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
+react-redux@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
+  integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -10542,6 +10603,18 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npmmirror.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -10828,6 +10901,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reselect@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.npmmirror.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
+  integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
+
 resolve-dir@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
@@ -12594,6 +12672,11 @@ url-to-options@^1.0.1:
   resolved "https://registry.npmmirror.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
   integrity sha512-0kQLIzG4fdk/G5NONku64rSH/x32NOA39LVQqlK8Le6lvTF6GGRJpqaQFGgU+CLwySIqBSMdwYM0sYcW9f6P4A==
 
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmmirror.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"