redux-remember：持久化你的 Redux 状态

redux-remember：持久化你的 Redux 状态

redux-remember Saves and loads your redux state from a key-value store of your choice 项目地址: https://gitcode.com/gh_mirrors/re/redux-remember

在当今的开发环境中，状态管理是构建复杂应用程序的关键部分。对于使用 Redux 作为状态管理库的项目来说，状态的持久化尤其重要。今天，我们要介绍一个开源项目：redux-remember，它可以帮助开发者轻松地持久化和恢复 Redux 状态。

项目介绍

redux-remember 是一个用于 Redux 状态持久化的库。它可以保存（持久化）和加载（恢复）指定的 Redux 状态，而不会影响其他状态。这意味着开发者可以选择哪些状态需要持久化，哪些可以忽略。

项目技术分析

redux-remember 专为与 Redux 5.0.0+ 和 redux-toolkit 2.0.1+ 兼容而设计。它通过提供一个增强器（enhancer）和自定义的 reducer，使得开发者能够轻松集成到现有的 Redux 应用程序中。该库经过彻底的单元测试和实战检验，确保其在各种环境下的稳定性和可靠性。

项目及技术应用场景

redux-remember 的核心功能是状态的持久化和恢复，这在多种应用场景中非常有用：

1. 用户偏好设置：例如，用户的主题选择、布局设置等，这些状态在用户会话之间需要保持不变。
2. 缓存：对于需要从服务器获取的数据，可以在本地存储一份缓存，减少不必要的网络请求。
3. 会话恢复：在用户关闭浏览器或应用后重新打开时，能够恢复之前的会话状态。

以下是具体的应用示例：

Web 应用

在 Web 应用中，redux-remember 可以使用 LocalStorage、SessionStorage 或开发者自定义的存储驱动。

import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { rememberReducer, rememberEnhancer } from 'redux-remember';

const mySlice = createSlice({
  name: 'mySlice',
  initialState: {
    text: ''
  },
  reducers: {
    setText(state, action: PayloadAction<string>) {
      state.text = action.payload;
    }
  }
});

const reducers = {
  mySlice: mySlice.reducer
};

const rememberedKeys = ['mySlice'];
const reducer = rememberReducer(reducers);
const store = configureStore({
  reducer,
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(
    rememberEnhancer(window.localStorage, rememberedKeys)
  )
});

React Native 应用

在 React Native 应用中，可以使用 AsyncStorage 进行状态持久化。

import AsyncStorage from '@react-native-async-storage/async-storage';
import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { rememberReducer, rememberEnhancer } from 'redux-remember';

const mySlice = createSlice({
  name: 'mySlice',
  initialState: {
    text: ''
  },
  reducers: {
    setText(state, action: PayloadAction<string>) {
      state.text = action.payload;
    }
  }
});

const reducers = {
  mySlice: mySlice.reducer
};

const rememberedKeys = ['mySlice'];
const reducer = rememberReducer(reducers);
const store = configureStore({
  reducer,
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(
    rememberEnhancer(AsyncStorage, rememberedKeys)
  )
});

多存储类型

对于需要使用多种存储类型的应用，redux-remember 也提供了灵活性。

const secureKeys = ['secureKey1', 'secureKey2'];
const rememberedKeys = [
  'insecureKey1', 'insecureKey2',
  ...secureKeys
];

export const customDriver: Driver = {
  setItem(key: string, value: any) {
    if (secureKeys.includes(key)) {
      return SecureStore.setItemAsync(key, value);
    }
    return AsyncStorage.setItem(key, value);
  },
  getItem(key: string) {
    if (secureKeys.includes(key)) {
      return SecureStore.getItemAsync(key);
    }
    return AsyncStorage.getItem(key);
  }
};

const store = configureStore({
  reducer: rememberReducer(reducers),
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(
    rememberEnhancer(customDriver, rememberedKeys, { prefix: '' })
  )
});

项目特点

redux-remember 的主要特点包括：

• 选择性持久化：只持久化指定的状态键，不影响其他状态。
• 兼容性：与 React、React Native 和 Redux Toolkit 等现代前端技术栈兼容。
• 自定义存储驱动：开发者可以使用内置的存储驱动，也可以实现自己的存储驱动。
• 灵活配置：提供了丰富的配置选项，如存储前后的序列化和反序列化函数、持久化的节流和防抖等。

通过上述分析，我们可以看出 redux-remember 是一个强大而灵活的 Redux 状态持久化解决方案。无论是在 Web 应用还是 React Native 应用中，它都能为开发者提供极大的便利，帮助他们更好地管理和维护应用状态。如果你正在寻找一个简单易用、功能强大的 Redux 状态持久化库，那么 redux-remember 绝对值得一试。

redux-remember Saves and loads your redux state from a key-value store of your choice 项目地址: https://gitcode.com/gh_mirrors/re/redux-remember