背景

• 项目中使用了规则引擎（规则类的文件集合）
• 使用class类进行构建，在项目初始化时进行了实例化
• 在项目redux中与订单进行了耦合，比较庞大和不利配置化（需解决耦合性的根本问题）

分析

• 将规则和订单分开，分别获取对应数据
• 再将规则和订单进行有机组合

实现

1. 规则 使用useHooks方式获取规则，并缓存到sessionstorage中

• sessionstroage 页面刷新时，数据不会丢失,规则不更新的问题 考虑到页面刷新，js文件会更新，规则也需要更新， 此时就要添加辅助行为window.onbeforeunload去主动清除sessionstorage中对应的规则，后面才会再拉取最新规则

export const useFetchRules = () => {
  const [ruleLoading, setRuleLoading] = useState(true);
  const [rules, setRules] = useState([]);
  useEffect(() => {
    fetchRule();
    // 刷新时需重新加载规则
    window.onbeforeunload = () => {
      sessionStorage.removeItem('ba-rules');
    };
  }, []);
  const fetchRule = async () => {
    try {
      const isDev = process.env.NODE_ENV === 'development';
      const rulesStr = sessionStorage.getItem('rules');
      if (rulesStr) {
        setRules(JSON.parse(rulesStr));
      } else {
        const resRules = isDev ? config.Keys : await FetchRuleFeilds();
        setRules(resRules);
        sessionStorage.setItem('ba-rules', JSON.stringify(resRules));
      }
      setRuleLoading(false);
    } catch (error) {
      console.log(error);
    }
  };
  return { ruleLoading, rules };
};

2. 订单获取（redux）

3. 规则和订单匹配

采用hooks写法

• 先获取到规则
• 暴露getOrderRule方法，参数为order

export const useOrderRules = () => {
  const { rules } = useFetchRules();
  let order
  const getFieldByKey = (field) =>{
    // xx
  }
  const getOrderRule = (data) => {
    order = data;
    return { getFieldByKey };
  };
  return {getOrderRule}
}

总结

通过把规则、订单单独获取，再进行结合，就可以实现达到解耦的目的