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

Question

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

根据sentry.io，错误是:

EXC_BREAKPOINT 主要
致命异常 6，代码 2390738480，子代码 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(unsigned long)  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&, folly::dynamic const&)  at setJSResponder(node_modules/react-native-sentry/lib/NativeClient.js:155:29)  at onChange(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3241:23)  at setResponderAndExtractTransfer(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3354:140)  at extractEvents(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3463:85)  at extractEvents(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:2971:54)  at fn(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3201:47)  at batchedUpdates(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:2448:20)  at batchedUpdates(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:198:16)  at _receiveRootNodeIDEvent(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3221:32)  at apply(node_modules/react-native/Libraries/Renderer/ReactNativeFiber-prod.js:3234:37)  at fn(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:299:42)  at __guard(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:262:7)  at value(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:10)  rizzle              0x10140bb00  std::__1::function::operator()(OpaqueJSContext*) const  rizzle              0x10139a110  facebook::react::tryAndReturnError(std::__1::function const&)  rizzle              0x1013923a8  facebook::react::RCTMessageThread::tryFunc(std::__1::function const&)  CoreFoundation      0x18756016c  __CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__  CoreFoundation      0x18755fa3c  __CFRunLoopDoBlocks  CoreFoundation      0x18755dca4  __CFRunLoopRun  CoreFoundation      0x18747e2d8  CFRunLoopRunSpecific  rizzle              0x101374c48  +[RCTCxxBridge runRunLoop]  Foundation          0x187fa7860  __NSThread__start__  libsystem_pthread   0x1871e432c  _pthread_body  libsystem_pthread   0x1871e41f8  _pthread_start

3 个月以来，我一直在努力弄清楚这个问题，并且一直在尝试替代库，但我真的很想能够使用 redux-persist。

Answer 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

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