我如何在 React-Native 中使用 Redux Slice 控制 AsyncStorage？答案

【问题标题】：How I can control AsyncStorage with Redux Slice in React-Native?我如何在 React-Native 中使用 Redux Slice 控制 AsyncStorage？
【发布时间】：2023-02-08 00:42:01
【问题描述】：

我是 Redux 的新手（不是 React-Native），我发现使用 Redux 最直接的方法是将它与 createSlice 函数一起使用。这是切片 -

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    isLoggedIn: false,
    cart: null
}

const Slice = createSlice({
    name: 'userAuth',
    initialState,
    reducers: {
        setLogin: (state, action) => {
            state.isLoggedIn = action.payload.isLoggedIn;
            AsyncStorage.setItem("isLoggedIn", JSON.stringify(state.isLoggedIn));
        },
        setLogout: (state) => {
            state.isLoggedIn = false;
            AsyncStorage.clear();
        },
        setCart: (state, action) => {
            state.cart = action.payload.cart;
            AsyncStorage.setItem("cart", JSON.stringify(action.payload.cart));
        },
        startUp: (state, action) => {
            state.cart = action.payload.cart;
            state.isLoggedIn = action.payload.isLoggedIn;
        }
    }
});


export const { setLogin, setLogout, setCart, startUp } = Slice.actions;

export const selectIsLoggedIn = (state) => state.userAuth.isLoggedIn;
export const selectCart = (state) => state.userAuth.cart;

export default Slice.reducer;

我正在使用 useDispatch 挂钩来更新状态。

const dispatch = useDispatch();

dispatch(setCart({cart: cartObj}));

但这导致我犯了一个错误-

 WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: Attempted to assign to readonly property.
onChange
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:191470:48
generatorResume@[native code]
asyncGeneratorStep@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25072:26
_next@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25094:29
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25101:14
tryCallTwo@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30613:9
doResolve@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30777:25
Promise@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30636:14
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25090:25
onChange@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:191487:33
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:191758:24
generatorResume@[native code]
asyncGeneratorStep@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25072:26
_next@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25094:29
tryCallOne@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30604:16
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30705:27
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31784:26
_callTimer@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31684:17
_callReactNativeMicrotasksPass@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31719:17
callReactNativeMicrotasks@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31926:44
__callReactNativeMicrotasks@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:24002:46
http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23781:45
__guard@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23985:15
flushedQueue@http://192.168.0.100:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23780:21
flushedQueue@[native code]
callFunctionReturnFlushedQueue@[native code]

我在 Ubuntu 22.04 上使用 Expo-CLI。请告诉我正确的方法来做到这一点。

【问题讨论】：

是否有任何 onChange 事件，这会导致问题
是的，我正在使用 react-native-input-spinner 包中的 onChange 事件更新状态。
尝试暂时避免它，然后再试一次。我认为问题在于
迷神，你说得对。当我在 onChange 函数之外使用 reducer 时，它工作正常。那么，您能告诉我如何更改购物车状态下的商品数量吗？

标签： react-native redux react-redux redux-toolkit asyncstorage

【解决方案1】：

您将需要使用 Redux Persist 来通过异步存储执行状态管理。检查此以获取更多说明。

https://blog.logrocket.com/use-redux-persist-react-native/

【讨论】：

我已经检查了链接，但它对我没有帮助。

【解决方案2】：

将数据设置到 asyncStorage 是异步的。在任何情况下，您都不应该将异步值运行到减速器中（应该 100% 同步）。而是将 asyncStorage 代码移至您的 api 请求函数，然后将其设置为 asyncStorage。

【讨论】：