🎈 perf(自定义tabbar): 优化自定义tabbar

src/reducers/hooks.ts

@@ -1,10 +1,12 @@
 
 //该方法纯粹只是个Ts类型定义文件
 import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux';
-import { DataParam } from './userInfo';
+import { DataParam as userInfoParam } from './userInfo';
 import { DataParam as commonDataParam } from './commonData';
+import { TabBarData as tabbarDataParam } from './tabBar';
 type Params = {
-    userInfo: DataParam,
-    commonData: commonDataParam
+  userInfo: userInfoParam
+  commonData: commonDataParam
+  tabBarData: tabbarDataParam
 }
-export const useSelector: TypedUseSelectorHook<Params> = useReduxSelector;
+export const useSelector: TypedUseSelectorHook<Params> = useReduxSelector;

src/reducers/index.ts

@@ -1,8 +1,18 @@
 import { combineReducers } from 'redux'
 import userInfo from './userInfo'
 import commonData from './commonData'
+import tabBarReducer from './tabBar'
 
-export default combineReducers({
-    userInfo,
-    commonData
-})
+export type Reducers = {
+  userInfo: typeof userInfo
+  commonData: typeof commonData
+  tabBarData: typeof tabBarReducer
+}
+
+export type ReducersKey = keyof Reducers
+
+export default combineReducers<Reducers>({
+  userInfo,
+  commonData,
+  tabBarData: tabBarReducer,
+})

src/reducers/tabBar.ts

@@ -0,0 +1,72 @@
+import { TabBarType } from '../constants/tabbar'
+import IconFont from '@/components/iconfont'
+
+type IconfontName = Parameters<typeof IconFont>['0']['name']
+
+type TabBarIndexMap = {
+  [Property: number]: {
+    id: number
+    pagePath: string
+    text: string
+    iconPath: IconfontName
+    selectedIconPath: IconfontName
+  }
+}
+
+
+const INITIAL_STATE = {
+  selectedId: 1,
+  tabItem: [
+    {
+      id: 1,
+      pagePath: '/pages/index/index',
+      text: '首页',
+      iconPath: 'icon-shouye1',
+      selectedIconPath: 'icon-shouye',
+    },
+    {
+      id: 2,
+      pagePath: '/pages/shopping/index',
+      text: '购物',
+      iconPath: 'icon-gouwu1',
+      selectedIconPath: 'icon-gouwu',
+    },
+    {
+      id: 3,
+      pagePath: '/pages/order/index',
+      text: '订单',
+      iconPath: 'icon-dingdan1',
+      selectedIconPath: 'icon-dingdan',
+    },
+    {
+      id: 4,
+      pagePath: '/pages/user/index',
+      text: '我的',
+      iconPath: 'icon-gerenzhongxin1',
+      selectedIconPath: 'icon-gerenzhongxin',
+    },
+  ],
+}
+
+export type TabBarData = {
+  selectedId: number
+  tabItem: TabBarIndexMap[number][]
+}
+
+export type TabBarAction = {
+  type: TabBarType
+  data: TabBarData
+}
+// TabBarReducer
+export default (state = INITIAL_STATE, action: TabBarAction) => {
+  const { type, data } = action
+  switch (type) {
+    case TabBarType.SET_SELECTED:
+      return {
+        ...state,
+        selectedId: data.selectedId,
+      }
+    default:
+      return state
+  }
+}