React Native中如何封装useSelector获取的变量并跨文件导入使用

由于你用到了Redux的useSelector Hook，按照React Hook的使用规则，Hook只能在React函数组件或者其他自定义Hook内部调用，因此你不能直接导出三个普通变量，封装成自定义Hook即可实现逻辑复用：

步骤1：新建单独的封装文件 #

你可以创建src/hooks/useCompanyInfo.js文件，写入如下代码：

import { useSelector } from 'react-redux'

export default function useCompanyInfo() {
  const companyValue = useSelector((state) => state.changeCompanyReducer.company);
  const selectionValueArray = Object.values(companyValue);
  const companyCode = selectionValueArray[0];
  const employeeId = selectionValueArray[1];
  return {
    selectionValueArray,
    companyCode,
    employeeId
  }
}

步骤2：在业务场景中引入使用 #

在任意需要用到对应值的React函数组件内，直接引入调用该自定义Hook即可：

import useCompanyInfo from '@/hooks/useCompanyInfo'

function YourBusinessComponent() {
  // 解构拿到三个变量，直接使用即可
  const { selectionValueArray, companyCode, employeeId } = useCompanyInfo()
  return <div>企业编码：{companyCode}</div>
}

注意：不要在普通JS文件的非组件/非Hook环境调用这个自定义Hook，否则会触发Hook调用规则报错。如果你需要在非组件环境获取这三个值，可以直接引入Redux的store实例，通过store.getState()方法直接读取对应state做计算即可。

内容的提问来源于stack exchange，提问作者Chinmayee Sahoo