Redux Toolkit -将暗模式值保存到本地存储

osh3o9ms  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(89)

我目前正在学习redux toolkit,我想在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;

什么是最佳解决方案?请注意,我只想将黑暗模式状态存储在本地存储中,因此如果我将来添加其他reducer,它们的值不会自动保存在那里。

xxb16uws

xxb16uws1#

您可以在darkModeSlice中更改您的initialState

const initialState = {
    darkMode: localStorage.getItem("darkMode") || false
}

如果localstorage是undefined,它将自动为false。当用户更改darkMode时,您将其存储为:

localStorage.setItem("darkMode", darkMode);

相关问题