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

【问题标题】：Redux Toolkit - Save dark mode value to local storageRedux Toolkit - 将暗模式值保存到本地存储
【发布时间】：2022-02-01 07:01:24
【问题描述】：

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

对此的最佳解决方案是什么？请注意，我只想将暗模式状态存储在本地存储中，所以如果我以后添加其他减速器，它们的值将不会自动保存在那里。

【问题讨论】：

从技术上讲，您应该向我们展示您对 localStorage.get('isdarkmode') 这样的解决方案的想法。
嗯，这是个问题，因为我现在真的不知道。我知道当状态以useState 存储在组件中时如何实现。然后我们可以使用所谓的lazy initialization 和useEffect 来检查本地存储值，但由于redux 有不同类型的工作流程，我真的不知道什么是正确的做法。

标签： javascript reactjs redux local-storage redux-toolkit

【解决方案1】：

你可以在 darkModeSlice 中改变你的 initialState

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

如果 localstorage 未定义，它将自动为 false。当用户更改 darkMode 时，您将其存储为：

localStorage.setItem("darkMode", darkMode);

【讨论】：