taro redux-persist 在IOS真机上没有调用storage.setItem。也没有报错

g6ll5ycj  于 2个月前  发布在  iOS
关注(0)|答案(8)|浏览(44)

相关平台

微信小程序

复现仓库

https://github.com/zlf911216/taro-test.git
小程序基础库: 2.30.4
使用框架: React

复现步骤

import { configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import wxStorage from "./storageHack";
import { reducers } from "./slice";

const persistConfig = {
key: "yfz",
storage: wxStorage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
devTools: false,
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
}),
});
export const persistor = persistStore(store);

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

期望结果

正常调用setItem

实际结果

没有调用setItem,导致刷新小程序后数据丢失。

环境信息

Taro CLI 3.6.2 environment info:
    System:
      OS: macOS 12.5
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 19.8.1 - ~/.nvm/versions/node/v19.8.1/bin/node
      Yarn: 1.22.11 - /usr/local/bin/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v19.8.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.2 => 3.6.2
      @tarojs/components: 3.6.2 => 3.6.2
      @tarojs/plugin-framework-react: 3.6.2 => 3.6.2
      @tarojs/plugin-mini-ci: 3.6.2 => 3.6.2
      @tarojs/plugin-platform-weapp: 3.6.2 => 3.6.2
      @tarojs/react: 3.6.2 => 3.6.2
      @tarojs/runtime: 3.6.2 => 3.6.2
      @tarojs/taro: 3.6.2 => 3.6.2
      @tarojs/webpack5-runner: 3.6.2 => 3.6.2
      babel-preset-taro: 3.6.2 => 3.6.2
      eslint-config-taro: 3.6.2 => 3.6.2
      react: 18.2.0 => 18.2.0
qvtsj1bj

qvtsj1bj1#

@zlf911216 Demo 缺失 config,无法运行

mbzjlibv

mbzjlibv2#

@zlf911216Demo 缺少配置,无法运行

已经补充 @Chen-jj

xesrikrc

xesrikrc3#

iOS真机确实没调用setItem,Android可以正常持久化,有替代的解决方案吗?

wixjitnu

wixjitnu5#

解决了 @rockyx
persistReducer的时候设置一下throttle。我暂时给所有的persistReducer都设置了throttle:10 就可以work。
我在redux-persist的源码里打log进行比对,定位到了没有调用setItem的原因。但是根本原因我暂时给不出。这边给出定位到的语句和定位的方法以供参考。如果能发现根本原因那是最好了。
我在node_modules下找到redux-persist这个库用vscode单独打开
全局搜索了调用setItem的语句。
然后在调用的路径上打console.error,找出在iOS真机上不一致的地方。
最后发现在 createPersistoid.js 这个文件下 timeIterator = setInterval(processNextKey, throttle) 这行语句给timeIterator赋值的时候iOS返回为0,其他机器上是正常返回。
如果不设置throttle的话默认为0,猜测这边可能会导致异常。
改为10试了一下,可以work。。。。在给timeIterator赋值的时候iOS正常返回。。

很操蛋。。很少自己主动在github上解决问题。激动了一下哈哈哈。
希望有所帮助。。
来自对自己项目的坚持,加油啊。

vojdkbi0

vojdkbi06#

@zZfd 老哥,throttle在哪设置呀

eiee3dmh

eiee3dmh7#

@zZfd 老哥,你这个方法好像也不太行,如果iphone在后台杀掉小程序还是会清空缓存

inkz8wg9

inkz8wg98#

有个iphone6的手机好像没问题,身边没其他的iPhone用来测试了。
这是我这边的信息和写法。
"react-redux": "^8.0.2",
"redux-persist": "^6.0.0",
"@tarojs/taro": "3.5.4",

export const persistUserReducer = persistReducer(
  {
    key: 'user',
    storage: persistStorage,
    whitelist: ['token', 'userInfo'],
    version: 1,
    writeFailHandler: (err: Error) => {
      console.log('user write fail', err)
    },
    throttle: 10,
    debug: IS_DEV,
  },
  userReducer
)

const rootReducer = combineReducers({
  status: statusReducer,
  user: persistUserReducer,
  http: httpReducer,
  address: persistAddressReducer,
  location: persistLocationReducer,
  order: persistOrderReducer,
})

const persistRootReducer = persistReducer(
  {
    key: 'root',
    version: 1,
    storage: persistStorage,
    blacklist: ['user', 'status', 'http', 'address', 'location', 'order'],
    debug: IS_DEV,
    throttle: 10,
    writeFailHandler: (err: Error) => {
      console.log('user write fail', err)
    },
    // migrate: createMigrate(
    //   {
    //     0: state => state,
    //     // @ts-ignore
    //     1: state => {
    //       return {
    //         user: {
    //           // @ts-ignore
    //           token: state?.user?.token,
    //         },
    //       }
    //     },
    //   },
    //   { debug: true }
    // ),
  },
  rootReducer
)

相关问题