在 iOS 设备上使用 Redux-Persist 和 React Native 时崩溃

Posted 2023-03-06

【中文标题】在 iOS 设备上使用 Redux-Persist 和 React Native 时崩溃

【英文标题】：Crashes when using Redux-Persist with React Native on iOS device

【发布时间】：2018-07-11 12:29:57

【问题描述】：

我一直在尝试在我正在构建的 React Native 应用程序中使用 redux-persist，但每当我这样做时，我在 ios 设备上运行时都会随机崩溃。在模拟器上运行时不会出现此问题。它发生在 redux-persist 的 4 和 5 版本上。

根据sentry.io，错误是：

EXC_BREAKPOINT main fatalException 6, Code 2390738480, Subcode 8

我已经在所有已发布的 iOS 11 版本上对此进行了测试。有时正常使用几天后错误似乎消失了，但随后又会再次出现，而且经常反复出现。这种行为表明只有当存储达到某个状态或者它变得太大时才会发生崩溃。但据我所知，情况并非如此——显然异步存储在 iOS 上没有大小限制（与 android 不同）。

sentry.io 堆栈跟踪似乎没有提供任何线索，但无论如何都在这里：

 javascriptCore 0x18e7fc630 bmalloc::Heap::allocateLarge(std::__1::lock_guard&, unsigned long, unsigned long)
  JavaScriptCore 0x18e7f9ea4 bmalloc::Allocator::allocateLarge(unsigned long)
  JavaScriptCore 0x18deb8a04 WTF::fastMalloc（无符号长）
  JavaScriptCore 0x18dec9d50 WTF::StringImpl::createUninitialized(unsigned int, unsigned short*&)
  JavaScriptCore 0x18dec9bf8 WTF::StringBuilder::allocateBufferUpConvert(unsigned char const*, unsigned int)
  JavaScriptCore 0x18e7e76f0 WTF::StringBuilder::appendQuotedJSONString(WTF::String const&)
  JavaScriptCore 0x18e55a2cc JSC::Stringifier::appendStringifiedValue(WTF::StringBuilder&, JSC::JSValue, JSC::Stringifier::Holder const&, JSC::PropertyNameForFunctionCall const&)
  JavaScriptCore 0x18e55b354 JSC::Stringifier::Holder::appendNextProperty(JSC::Stringifier&, WTF::StringBuilder&)
  JavaScriptCore 0x18e55a5d4 JSC::Stringifier::appendStringifiedValue(WTF::StringBuilder&, JSC::JSValue, JSC::Stringifier::Holder const&, JSC::PropertyNameForFunctionCall const&)
  JavaScriptCore 0x18e5594e0 JSC::Stringifier::stringify(JSC::Handle)
  JavaScriptCore 0x18e55d804 JSC::JSONProtoFuncStringify(JSC::ExecState*)
  JavaScriptCore 0x18e5f34c8 llint_entry
  JavaScriptCore 0x18e5f2a94 llint_entry
  JavaScriptCore 0x18e5f2a94 llint_entry
  JavaScriptCore 0x18e5f2a94 llint_entry
  JavaScriptCore 0x18e5f2a30 llint_entry
  JavaScriptCore 0x18e5f2ee0 llint_entry
  JavaScriptCore 0x18e5f2a30 llint_entry
  JavaScriptCore 0x18e5f2a94 llint_entry
  JavaScriptCore 0x18e5f2a30 llint_entry
  JavaScriptCore 0x18e5ebf50 llintPCRangeStart
  JavaScriptCore 0x18e4d1b94 JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*)
  JavaScriptCore 0x18def71b8 JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
  JavaScriptCore 0x18e506c3c JSC::boundThisNoArgsFunctionCall(JSC::ExecState*)
  JavaScriptCore 0x18e5ec098 vmEntryToNative
  JavaScriptCore 0x18def7200 JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
  JavaScriptCore 0x18e14a1fc JSC::profiledCall(JSC::ExecState*, JSC::ProfilingReason, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
  JavaScriptCore 0x18def6f68 JSObjectCallAsFunction
  rizzle 0x1013eca4c facebook::react::Object::callAsFunction(OpaqueJSValue*, int, OpaqueJSValue const* const*) const
  rizzle 0x10140c76c facebook::react::JSCExecutor::callFunction(std::__1::basic_string, std::__1::allocator > const&, std::__1::basic_string, std::__1::allocator > const&, 愚蠢::动态常量&)
  在 setJSResponder(node_modules/react-native-sentry/lib/NativeClient.js:155:29)
  在 onChange(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3241:23)
  在 setResponderAndExtractTransfer(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3354:140)
  在 extractEvents(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3463:85)
  在 extractEvents(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:2971:54)
  在 fn（node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3201:47）
  在批处理更新（node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:2448:20）
  在批处理更新（node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:198:16）
  在 _receiveRootNodeIDEvent(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3221:32)
  在应用（node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3234:37）
  在 fn(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:299:42)
  在 __guard(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:262:7)
  在值（node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:10）
  rizzle 0x10140bb00 std::__1::function::operator()(OpaqueJSContext*) 常量
  rizzle 0x10139a110 facebook::react::tryAndReturnError(std::__1::function const&)
  rizzle 0x1013923a8 facebook::react::RCTMessageThread::tryFunc(std::__1::function const&)
  核心基础 0x18756016c __CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__
  CoreFoundation 0x18755fa3c __CFRunLoopDoBlocks
  核心基础 0x18755dca4 __CFRunLoopRun
  CoreFoundation 0x18747e2d8 CFRunLoopRunSpecific
  rizzle 0x101374c48 +[RCTCxxBridge runRunLoop]
  基础 0x187fa7860 __NSThread__start__
  libsystem_pthread 0x1871e432c _pthread_body
  libsystem_pthread 0x1871e41f8 _pthread_start

3 个多月以来，我一直在尝试深入了解这个问题，并且一直在尝试其他库，但我真的很想能够使用 redux-persist。

【问题讨论】：

我遇到过类似的问题，即单个 reduce 的大小有很多 mb 数据（想想 52 左右！）。它似乎在 iOS 上崩溃了。不确定是否是确切原因，但我怀疑生成这么大的字符串内字段值存在问题。这听起来可能与您的问题相似吗？如果是这样，我也许可以用我最近实施的他们的解决方案来回答。

@RobWalker 这可能是相似的——我认为我没有那么多数据，但单个减速器肯定有可能大约 35MB。根据 redux-persist 开发人员的反馈，我正在尝试使用 redux-persist-filesystem-storage 代替默认的 AsyncStorage 实现，该实现还没有崩溃...... ????

酷。这是我的包裹，如果您有任何问题，请告诉我:)

哈！很好......我正在考虑实现一个 PouchDB 存储引擎，因为这会给我与 CouchDb 同步的有趣可能性 - 看起来它不会那么复杂。

酷。我也在使用 redux-persist-redux，这对我来说效果很好。

【参考方案1】：

我在使用 redux-persist 时遇到了完全相同的错误和堆栈跟踪，这似乎是由于我的一个 reducer 中的数据太大而导致存储引擎的某些方面无法处理。

在我的例子中，试图持久化的 json 大小为 520000000 个字符！

最后，我找到的最佳解决方案是将持久化的 reducer 拆分为更小的 reducer，然后我将它们合并到我的应用程序中，这样我就可以将它作为我的应用程序代码中的一个来处理。

我还尝试了不同的存储引擎，以找到处理该数据量的最佳引擎，最终选择了redux-persist-realm，尽管我们使用patch it 来修复我们遇到的一些错误。

为了拆分reducer，我使用了每个项目的第一个字符uuid，这样我就可以得到16个大小合理的子集。

首先，我为 uuid 的每个潜在第一个字符创建了一个 reducer

const store = createStore(
    
      ... other reducers
      recordsDataA: createReducer('A'),
      recordsDataB: createReducer('B'),
      recordsDataC: createReducer('C'),
      recordsDataD: createReducer('D'),
      recordsDataE: createReducer('E'),
      ...
    ,
    applyMiddleware(...middlewares),
    enhancer
)

---

export const createReducer = key => combineReducers(
  records: recordsReducer(key),
)

---

const recordsReducer = batch => (state = [], action) => 
  switch (action.type) 

    case REQUEST_RECORDS_SUCCESS:
      return action.records.filter(record => record.id[0].toUpperCase() === batch)

    ... other actions

    default:
      return state
  

然后在我的选择器中，使用reselect，我将各个reducer 组合回单个数组，以便可以轻松地从其他选择器中使用它。即-

export const makeGetAllRecords = () =>
  createSelector(
    [
      state => state.recordsDataA.records,
      state => state.recordsDataB.records,
      state => state.recordsDataC.records,
      state => state.recordsDataD.records,
      state => state.recordsDataE.records,
      state => state.recordsDataF.records,
      ...
    ],
    (...allBatches) => [].concat(...allBatches)
  )

---

export const getRecordById = (state: Array<Record>, recordId: string) =>
  makeGetAllRecords()(state).find(record => record.id === recordId) || null

我确信可以做很多事情来整理和优化该代码，但它在生产环境中运行良好。

【讨论】：

更新为 makeGetAllRecords 添加缺失的示例代码