我是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。请告诉我做这件事的正确方法。
将数据设置到asyncStorage是异步的。在没有循环的情况下，您不应该将异步值运行到reducer中(应该是100%同步(。相反，将asyncStorage代码移到api请求函数中，然后将其设置为asyncStorage。
您需要使用Redux-Persist来使用异步存储执行状态管理。查看此以获取进一步的说明。
https://blog.logrocket.com/use-redux-persist-react-native/
您需要用async/await 包装AsyncStorage函数