把路局文本计算抽离出去

src/pages/Measure.tsx

@@ -14,12 +14,14 @@ import { updateTaskState } from '../store/features/measureSlice';
 import Bridge from '../utils/bridge';
 import { selectLabeledKtjOrgs, updateRailPoints } from '../store/features/baseData';
 import { updateOrg } from '../store/features/contextSlice';
-import { textsOfKeys } from '../utils/helper';
+import { selectOrgTextArr } from '../store';
 
 export default function Measure() {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const labeledKtjOrgs = useAppSelector((state) => selectLabeledKtjOrgs(state.baseData));
+  const labeledKtjOrgs = useAppSelector(selectLabeledKtjOrgs);
+  const orgTextArr = useAppSelector(selectOrgTextArr)
+
   const measureState = useAppSelector((state) => state.measure);
   const contextState = useAppSelector((state) => state.context);
   const baseState = useAppSelector((state) => state.baseData);
@@ -77,12 +79,6 @@ export default function Measure() {
     }
   }, [measureState.rightPoints]);
 
-  const orgTextArr = () => {
-    return textsOfKeys(
-      [contextState.currOrgCode, contextState.currGWDCode, contextState.currXMCode],
-      labeledKtjOrgs
-    );
-  };
 
   const onSaveClick = () => {
     navigate('/measure/save');
@@ -210,7 +206,7 @@ export default function Measure() {
             onClick={onOrgBarClick}
           >
             <p className="text-text" style={{ color: contextState.currOrgCode ? '#333' : 'red' }}>
-              {contextState.currOrgCode ? orgTextArr().join('/') : '点击此处选择铁路局和工务段'}
+              {contextState.currOrgCode ? orgTextArr.join('/') : '点击此处选择铁路局和工务段'}
             </p>
             <span className="text-primary underline">修改</span>
           </section>
@@ -253,3 +249,5 @@ export default function Measure() {
     </>
   );
 }
+
+

src/pages/MeasureSave.tsx

@@ -4,11 +4,10 @@ import icon_arr_r from '../assets/icon_arr_s_r.svg';
 import { ChangeEvent, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../utils/hooks';
 import { XB_CODES } from '../utils/constant';
-import { selectLabeledKtjOrgs } from '../store/features/baseData';
-import { textsOfKeys } from '../utils/helper';
 import { SaveMeasureDTO } from '../services/apiTypes';
 import Bridge from '../utils/bridge';
 import { resetState } from '../store/features/measureSlice';
+import { selectOrgTextArr } from '../store';
 
 export default function MeasureSave() {
   const navigate = useNavigate();
@@ -17,7 +16,7 @@ export default function MeasureSave() {
 
   const contextState = useAppSelector((state) => state.context);
   const baseState = useAppSelector((state) => state.baseData);
-  const labeledKtjOrgs = useAppSelector((state) => selectLabeledKtjOrgs(state.baseData));
+  const orgTextArr = useAppSelector(selectOrgTextArr)
 
   const [name, setName] = useState('');
   const [railPickerVisible, setRailPickerVisible] = useState(false);
@@ -33,7 +32,7 @@ export default function MeasureSave() {
       return;
     }
     const railType = baseState.railTypes.find((r) => r.id === contextState.currRailTypeId);
-    const [_, gwd, xm] = orgTextArr();
+    const [, gwd, xm] = orgTextArr;
     const dto: SaveMeasureDTO = {
       operatorName: '',
       trackShapeCode: railType!.code,
@@ -54,12 +53,6 @@ export default function MeasureSave() {
       }
     });
   };
-  function orgTextArr() {
-    return textsOfKeys(
-      [contextState.currOrgCode, contextState.currGWDCode, contextState.currXMCode],
-      labeledKtjOrgs
-    );
-  }
 
   return (
     <>

src/pages/Setting.tsx

@@ -1,6 +1,6 @@
 import { NavBar, Toast } from 'antd-mobile';
-import icon_arr_r from '../assets/icon_arr_s_r.svg';
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+// import icon_arr_r from '../assets/icon_arr_s_r.svg';
+import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router';
 import { useAppDispatch, useAppSelector } from '../utils/hooks';
 import { fetchConfig, saveConfig } from '../store/features/contextSlice';

src/store/features/baseData.ts

@@ -4,6 +4,7 @@ import { labeledKtjOrgs } from '../../utils/helper';
 
 import { ktjOrgs } from '../../utils/constant';
 import Bridge from '../../utils/bridge';
+import { RootState } from '..';
 
 interface BaseDataState {
   ktjOrgs: KTJOrg[];
@@ -45,7 +46,7 @@ export const baseDataSlice = createSlice({
 export const { updateRailPoints } = baseDataSlice.actions;
 export default baseDataSlice.reducer;
 
-export const selectKtjOrgs = (state: BaseDataState) => state.ktjOrgs;
+export const selectKtjOrgs = (state: RootState) => state.baseData.ktjOrgs;
 export const selectLabeledKtjOrgs = createSelector(selectKtjOrgs, (orgs) => {
   return labeledKtjOrgs(orgs);
 });

src/store/features/contextSlice.ts

@@ -6,6 +6,7 @@ import {
   SyncProgress,
 } from '../../services/mobileWsType';
 import Bridge from '../../utils/bridge';
+import { RootState } from '..';
 
 interface ContextState {
   device: PeripheralStatus['data'];
@@ -136,3 +137,5 @@ export const {
   updateSyncProgress,
 } = contextSlice.actions;
 export default contextSlice.reducer;
+
+export const selectOrgCodes = (state: RootState) => [state.context.currOrgCode, state.context.currGWDCode, state.context.currXMCode];

src/store/index.ts

@@ -1,8 +1,10 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore, createSelector } from '@reduxjs/toolkit';
 import measureSlice from './features/measureSlice';
-import contextSlice from './features/contextSlice';
+import contextSlice, { selectOrgCodes } from './features/contextSlice';
 import historySlice from './features/historySlice';
-import baseDataSlice from './features/baseData';
+import baseDataSlice, { selectLabeledKtjOrgs } from './features/baseData';
+import { textsOfKeys } from '../utils/helper';
+
 // configureStore创建一个redux数据
 const store = configureStore({
   // 合并多个Slice
@@ -14,6 +16,10 @@ const store = configureStore({
   },
 });
 
+export const selectOrgTextArr = createSelector(selectLabeledKtjOrgs, selectOrgCodes, (ktjOrgs, codes) => {
+  return textsOfKeys(codes, ktjOrgs);
+})
+
 export default store;
 
 export type RootState = ReturnType<typeof store.getState>;