![](/img/trans.png)
[英]React & Redux, Update state, Error: A state mutation was detected between dispatches
[英]I am getting mutation of state error between dispatches from redux
我收到以下錯誤:
在路徑“notifications.adhans.AsrAdhan”中的調度之間檢測到 state 突變。 這可能會導致不正確的行為。 ( https://redux.js.org/style-guide/style-guide#do-not-mutate-state )]
以下是我在 notifications.ts 文件中的通知縮減程序。
import {
RESTORE_NOTIFICATIONS,
SET_ADHAN,
SET_ADHANTOGGLE,
SET_REMINDER,
SET_REMINDERTOGGLE,
} from "./../constants";
export const initialState = {
reminderToggle: true,
adhanToggle: true,
adhans: {
FajrAdhan: false,
DhuhrAdhan: true,
AsrAdhan: false, //--->getting mutation error for this
MaghribAdhan: true,
IshaAdhan: true,
},
reminders: {
FajrReminder: false,
DhuhrReminder: false,
AsrReminder: true,
MaghribReminder: false,
IshaReminder: true,
SunriseReminder: true,
MidnightReminder: false,
},
};
export default (state = initialState, action: AnyAction): notificationsT => {
switch (action.type) {
case SET_REMINDERTOGGLE:
return {
...state,
reminderToggle: action.payload,
};
case SET_ADHANTOGGLE:
return {
...state,
adhanToggle: action.payload,
};
case SET_ADHAN:
return {
...state,
adhans: {
...state.adhans,
[action.payload.key]: action.payload.value,
},
};
case SET_REMINDER:
return {
...state,
reminders: {
...state.reminders,
[action.payload.key]: action.payload.value,
},
};
case RESTORE_NOTIFICATIONS:
return { ...action.payload };
default:
return state;
}
};
RestoreState 中的 src\screens\Home.tsx:127:14 處的錯誤堆棧點。
下面是Home.tsx的相關代碼
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as actionTypes from "../store/constants";
import { initialState as notifInitState } from "../store/reducers/notifications";
...
const updatedNotificationsstate = { ...notifInitState };
const adhanKeys = Object.keys(notifInitState.adhans);
const keysArray = [
...adhanKeys,
...//other state keys
];
const Home = ({ navigation }) => {
const dispatch = useAppDispatch();
//When component mounts on start, Restore the redux state
React.useEffect(() => {
const RestoreState = async () => {
const savedState = await AsyncStorage.multiGet(keysArray);
savedState.forEach(([key, value]) => {
...
if(value){
//notifications
if (adhanKeys.includes(key))
return (updatedNotificationsstate.adhans[key] = JSON.parse(value));
...
}
});
dispatch({
type: actionTypes.RESTORE_NOTIFICATIONS,
payload: updatedNotificationsstate,
});
};
RestoreState();
}, []);
---
return (
<Layout>
..
</Layout>
);
};
export default Home;
我在這里做錯了什么???
請注意,為了方便 javascript 編碼人員,我已經刪除了 typesrcipt 類型。
updatedNotificationsstate.adhans[key] = JSON.parse(value)
看起來是一個突變。
您已經正確創建了updatedNotificationsstate
的淺拷貝,但所有元素仍然是對 state 中原始元素的引用,即updatedNotificationsstate.adhans
是對先前 state 的引用。您還必須淺拷貝任何正在更新的嵌套 state 屬性。
if (adhanKeys.includes(key)) {
return (updatedNotificationsstate.adhans = { // <-- new object reference
...updatedNotificationsstate.adhans, // <-- shallow copy previous
[key]: JSON.parse(value) // <-- update property
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.