如何在react redux的createSlice中使用hook

Question

如何在react @reduxjs/toolkit的createSlice中使用钩子将数据保存在localStorage中每当我更改主题时，我想将数据保存在localStorage中。我知道这可以直接使用 js 代码完成，但我在 useLocalStorage 挂钩方面遇到问题。

import { createSlice } from "@reduxjs/toolkit";
import useLocalStorage from "../hooks/useLocalStorage";

const initialState = {
    theme: true
}

const [settings, setSettings] = useLocalStorage("settings", initialState);


export const settingsSlice = createSlice({
    name: "theme",
    initialState: { value: initialState },
    reducers: {
        setSettings: (state, action) => {
            state.value = action.payload;
        },
        toggleTheme: (state) => {
            const temp = { ...state.value, theme: !state.value.theme };

            //save in localStorage
            setSettings(temp);

            state.value = temp;
        },
    },
});

export const { toggleTheme } = settingsSlice.actions;

export default settingsSlice.reducer;

import { useState } from "react";

function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.log(error);
        }
    });

    const setValue = (value) => {
        try {
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.log(error);
        }
    };

    return [storedValue, setValue];
}

export default useLocalStorage;

我尝试在更新数据之前调用该钩子，但出现错误

Answer 1

多件事：

1. 减速器必须是纯函数。这意味着不会产生副作用，例如从除此之外的任何地方读取数据，store并且action也不会在任何地方写入数据。不允许您使用减速器中的 localStorage。

2. Hooks 只能从 React 组件中调用 - 不能从组件之外的任何函数调用。好处是，如果您不希望组件本地状态与本地存储“同步”（在这里您不需要），那么这里的所有代码都可以归结为window.localStorage.setItem(key, JSON.stringify(valueToStore));- 您不需要useState这里的东西。

3. 大多数人只是使用redux-persist将状态副本保存到 localStorage 并恢复它。它是高度可配置的，因此您也只能保存其中的一部分。

4. 如果你想手动完成，你需要使用某种中间件（因为这是 Redux 中副作用所属的地方） - 我建议使用RTK 的侦听器中间件来查找存储更改并保存在侦听器中间件效果中。