React Native 0.80升级后Redux Connect组件无法找到Store的问题求助

各位大佬好，我最近把React Native项目从0.74升级到0.80后，遇到了一个Redux的奇怪问题，折腾了好久找不到根因，求帮忙看看！

问题描述 #

升级后出现了这个报错：

Could not find "store" in either the context or props of "Connect(SyncFavorites)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(SyncFavorites)".

我用的是原生Redux + react-redux，所有相关依赖都已经更到最新版本了。我检查过store实例是正常创建的（不是null），如果注释掉connect相关的代码，组件就能正常渲染，所以问题肯定出在connect和Provider的配合上。

相关代码片段 #

store.js

import React from 'react';
import { createStore, compose } from 'redux';
import { Provider } from 'react-redux';
import { persistStore, persistReducer } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import createSensitiveStorage from 'redux-persist-sensitive-storage';
import reducer from './reducer';
import { CLEAR_STATE } from './actions';

/* eslint-disable no-underscore-dangle, no-undef */
const composeEnhancers = (__DEV__ && global && global.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
/* eslint-enable */

const secureStorage = createSensitiveStorage({
  keychainService: 'rn-favorites',
  sharedPreferencesName: 'favorites'
});

const persistConfig = {
  key: 'rn-favorites',
  storage: secureStorage,
  stateReconciler: autoMergeLevel2
};

const persistedReducer = persistReducer(persistConfig, reducer);
const enhancer = composeEnhancers();

export const store = createStore(persistedReducer, enhancer);
export const persistor = persistStore(store);

export const clearStore = () => {
  store.dispatch({ type: CLEAR_STATE });
};

export const provideFavorites = WrappedComponent => {
  const StoreProvider = props => (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <WrappedComponent {...props} />
      </PersistGate>
    </Provider>
  );
  StoreProvider.displayName = `StoreProvider(${WrappedComponent.displayName})`;
  return StoreProvider;
};

SyncFavorites.js

// @flow
import * as React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { provideFavorites } from '../../redux/store';
import type { Favorite } from '../../types';
import { saveFavorites as saveFavoritesAction } from '../../redux/actions';
import type { SaveFavoritesAction } from '../../redux/actions';

const SyncFavoritesContext = React.createContext();
export const useSyncFavorites = () => React.useContext(SyncFavoritesContext);

const SyncFavorites = ({
  children,
  favorites,
  onSaveFavorites,
  subscribedCategories,
  interval,
  userId
}: {
  children: React.Node,
  favorites: Array<Favorite>,
  onSaveFavorites: SaveFavoritesAction,
  subscribedCategories: Array<String>,
  interval: Number,
  userId: String
}) => {
  return (
    <SyncFavoritesContext.Provider value={{ favorites }}>
      {children}
    </SyncFavoritesContext.Provider>
  );
};

const mapStateToProps = (favorites, props) => {
  const favoriteData = favorites[props?.userContext?.userId] || [];
  return { favorites: favoriteData, userId: props?.userContext?.userId };
};

const mapDispatchToProps = { onSaveFavorites: saveFavoritesAction };

export default compose(
  provideFavorites,
  connect(mapStateToProps, mapDispatchToProps)
)(SyncFavorites);

App.tsx使用方式

<SyncFavorites>
  <View style={{flex:1, backgroundColor: "yellow" }}/>
</SyncFavorites>

我的排查思路 #

1. 确认store实例正常创建，persistor也没有报错；
2. 注释掉connect相关代码后，组件能正常渲染，说明Provider的包裹逻辑本身是生效的；
3. 怀疑过RN0.80升级带来的React版本变化（对应React 18.2.0）是否影响了Context传递，但没找到直接关联点；

求问 #

有没有大佬遇到过类似的升级问题？或者能看出我的代码里哪里有问题？我感觉是compose的顺序或者HOC的执行时机出了问题，但不确定怎么验证。

内容来源于stack exchange