我目前正在学习 redux 工具包,我想将暗模式状态存储在
localStorage
中,这样如果用户刷新页面,所选模式保持不变。我的应用程序如下所示:
index.js
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import darkModeReducer from "./darkModeSlice";
import App from "./App";
const store = configureStore({
reducer: {
darkMode: darkModeReducer,
},
});
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
darkModeSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
darkMode: false,
};
export const darkModeSlice = createSlice({
name: "darkMode",
initialState,
reducers: {
toggleDarkMode: (state) => {
state.darkMode = !state.darkMode;
},
},
});
export const { toggleDarkMode } = darkModeSlice.actions;
export default darkModeSlice.reducer;
这个问题的最佳解决方案是什么?请注意,我只想将暗模式状态存储在本地存储中,因此如果我将来添加其他减速器,它们的值将不会自动保存在那里。
您可以在 darkModeSlice 中更改初始状态
const initialState = {
darkMode: localStorage.getItem("darkMode") || false
}
如果 localstorage 未定义,它将自动为 false。 当用户更改暗模式时,您可以将其存储为:
localStorage.setItem("darkMode", darkMode);
您可以使用 redux-persist 将您的状态保存在本地存储中