反应原生 redux-persist 切片

Posted 2023-02-19

【中文标题】反应原生 redux-persist 切片

【英文标题】：React native redux-persist slices

【发布时间】：2021-02-28 21:04:12

【问题描述】：

我正在使用以下boilerplate，具有以下结构 Redux 存储和切片。

但是我在使它工作时遇到了一些麻烦。

我需要做的是保存一些信息，例如：language 和 type of theme（亮或暗）。

因此能够保存、读取它们并能够覆盖作为对象的信息。

现在我做了以下操作，在 Store 中创建了一个名为 Settings 的文件夹，其中包含以下文件：

设置/index.js：

import  buildSlice  from '@thecodingmachine/redux-toolkit-wrapper'
import InitSettings from './Init'

const sliceInitialState = 
  colorScheme: "light",
  lang: "fr",
  item: 


export default buildSlice('settings', [InitSettings], sliceInitialState).reducer

设置/Init.js

import 
  buildAsyncState,
  buildAsyncActions,
  buildAsyncReducers,
 from '@thecodingmachine/redux-toolkit-wrapper'

export default 
  initialState: buildAsyncState(),
  action: buildAsyncActions('settings/init', async (args,  dispatch ) => 
    console.log("Settings", args)
    // Timeout to fake waiting some process
    // Remove it, or keep it if you want display a beautiful splash screen ;)
    await new Promise((resolve) => setTimeout(resolve, 1000))
    // Here we load the user 1 for example, but you can for example load the connected user
    await dispatch(
      theme: "dark",
      lang: "it"
    )
  ),
  reducers: buildAsyncReducers(
    //errorKey: false,
    //loadingKey: false,
    //itemKey: 'item'
  ), // We do not want to modify some item by default

我在 Store 的 index.js 文件中添加了 settings 并将其列入白名单：

import AsyncStorage from '@react-native-async-storage/async-storage'
import  combineReducers  from 'redux'
import 
  persistReducer,
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
 from 'redux-persist'
import  configureStore  from '@reduxjs/toolkit'

import startup from './Startup'
import user from './User'
import settings from './Settings'

const reducers = combineReducers(
  settings,
  startup,
  user,
)

const persistConfig = 
  key: 'root',
  storage: AsyncStorage,
  whitelist: [settings],


const persistedReducer = persistReducer(persistConfig, reducers)

const store = configureStore(
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => 
    const middlewares = getDefaultMiddleware(
      serializableCheck: 
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      ,
    )

    if (__DEV__ && !process.env.JEST_WORKER_ID) 
      const createDebugger = require('redux-flipper').default
      middlewares.push(createDebugger())
    

    return middlewares
  ,
)

const persistor = persistStore(store)

export  store, persistor 

但它不起作用，当我这样做时：

const st = useSelector((state) => state)
console.log(st.settings)

我在控制台打印了这个：

"colorScheme": "light", "error": null, "item": undefined, "lang": "fr", "loading": false

你能帮帮我吗？

【问题讨论】：

来自 devtools 的信息将很有用，例如：分派了哪些操作以及它们有哪些数据，在分派操作后减速器做了哪些更改。如果您无法让 devtools 为本机运行，则可以添加记录操作和状态的中间件。

我收到了类似的错误：错误在操作中检测到​​不可序列化的值，路径为：payload。值：[错误：操作可能没有未定义的“类型”属性。你拼错了一个常量吗？] 看看调度这个动作的逻辑："error": "message": "Rejected", "meta": "aborted": false, "arg": " colorScheme": "dark", "condition": false, "requestId": "OExINHVwoC2nyJA-83gJV", "payload": [错误：动作可能没有未定义的“类型”属性。你有没有拼错一个常量？], "type": "settings/init/rejected"

（参见redux.js.org/faq/…）（允许不可序列化的值参见：redux-toolkit.js.org/usage/…）

s: "colorScheme": "light", "error": [错误：动作可能没有未定义的“类型”属性。你有没有拼错一个常量？], "lang": "fr", "loading": false

在状态中检测到不可序列化的值，在路径中：settings.error。值：[错误：操作可能没有未定义的“类型”属性。你拼错了一个常量吗？] 看看处理这个动作类型的 reducer：settings/init/rejected。 （见redux.js.org/faq/…）

【参考方案1】：

看起来buildAsyncActions 调用createAsyncThunk 并且payloadCreator 应该返回一个promise。

你可以只返回一个承诺而不是发送：

async (args) => 
  await new Promise((resolve) =>
    setTimeout(resolve, 1000),
  );
  return some:'value'
,

或者发送一个有效的动作：

async (args,  dispatch ) => 
  await new Promise((resolve) =>
    setTimeout(resolve, 1000),
  );
  dispatch(
    type: 'SOME_TYPE', //you have to give the action a type
    theme: 'dark',
    lang: 'it',
  );
,

【讨论】：

我无法让它工作，我应该给你什么意见：reducers: buildAsyncReducers (...)

如果我这样做，它似乎可以工作：return colorScheme: args.colorScheme, lang:"fr"，但是通过调度我没有成功。