Redux 持久化插件使用方法详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Redux 已经成为了非常常用的数据流管理库。Redux 提供了一些特性方便我们在应用中管理状态，但是，当我们需要将这些状态保存在本地时，就需要使用 Redux 持久化插件。本文将详细介绍 Redux 持久化插件的使用方法，并提供示例代码帮助读者更好地理解。

Redux 持久化简介

Redux 持久化可以让我们将 store 中的状态保存在本地，这样我们就可以在页面刷新后仍然可以访问这些已经保存的状态。

Redux 持久化插件通过将我们定义的 reducer 返回的 state 保存到本地存储中，可以将 store 中的状态还原到之前的状态。

安装和使用

使用 Redux 持久化插件需要先安装：

npm install redux-persist

安装完毕后，在我们的应用中引入 redux-persist 的 persistReducer 和 persistStore 方法。

import { persistReducer, persistStore } from 'redux-persist';

然后，在我们定义我们的 reducer 时，使用 persistReducer 将其包裹，返回新的 reducer。persistReducer 接受一个配置对象作为参数，用于指定哪些 reducer 的 state 需要持久化。

// javascriptcn.com code example
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 使用 localStorage 存储

// define your reducers

const rootReducer = combineReducers({
  reducer1,
  reducer2
});

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['reducer1'], // 需要持久化 reducer1 中的 state
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

在 configureStore 中，我们可以使用 persistStore 方法来创建一个持久化的 store:

import { persistStore } from 'redux-persist';
import rootReducer from './reducers';

// 设定 store

const persistor = persistStore(store);
export { store, persistor };

这样，我们的 store 中的状态就会被 Redux 持久化插件自动保存到本地存储中。

配置选项

在上一节的代码中，我们使用了 persistConfig 来设定配置。这里我们详细解释一下 persistConfig 各个选项的含义。

key

key 用于指定 Redux store 保存到本地存储中的键名，默认的键名是 persist:root。

const persistConfig = {
  key: 'root', // 指定键名为 "root"
  // Other config options
};

storage

storage 用于指定持久化存储使用的存储介质，默认使用 localStorage。

import sessionStorage from 'redux-persist/lib/storage/session';

const persistConfig = {
  key: 'root',
  storage: sessionStorage, // 使用 sessionStorage 存储
  // Other config options
};

whitelist

whitelist 用于指定哪些 reducer 中的 state 需要被持久化。如果我们只需要持久化某一个 reducer 中的 state，我们可以使用 whitelist 将其指定。

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['reducer1'], // 需要持久化 reducer1 中的 state
};

blacklist

blacklist 用于指定哪些 reducer 中的 state 不需要被持久化。

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['reducer2'], // 不需要持久化 reducer2 中的 state
};

transforms

transforms 用于设置将存储的值 transform 后再存储。其中 transforms 是一个数组，每个元素都是一个 transform 对象，其中有一个可选的 transform 函数。

// javascriptcn.com code example
import { createTransform } from 'redux-persist';
import { snakeCase } from 'lodash';

const textTransform = createTransform(
  // 在 store 内部将 text 转换为小写
  (state) => ({ ...state, text: snakeCase(state.text) }),
  (state) => ({ ...state, text: state.text.toUpperCase() }),
);

const persistConfig = {
  key: 'root',
  storage,
  transforms: [textTransform],
};

示例代码

下面是一个简单的购物车示例，使用 Redux 持久化插件保存购物车数据。

在这个示例中，购物车中的商品条目使用 id 做键值。

// javascriptcn.com code example
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// actions
const ADD_TO_CART = 'ADD_TO_CART';
const REMOVE_FROM_CART = 'REMOVE_FROM_CART';

const addToCart = (product) => ({
  type: ADD_TO_CART,
  product,
});

const removeFromCart = (productId, quantity) => ({
  type: REMOVE_FROM_CART,
  productId,
  quantity,
});

// reducers
const initialState = {
  items: {},
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      const { id, name, price } = action.product;
      const item = state.items[id];
      return {
        ...state,
        items: {
          ...state.items,
          [id]: {
            id,
            name,
            price,
            quantity: item ? item.quantity + 1 : 1,
          },
        },
      };
    case REMOVE_FROM_CART:
      const { productId, quantity } = action;
      const newItem = {
        ...state.items[productId],
        quantity: state.items[productId].quantity - quantity,
      };
      if (newItem.quantity > 0) {
        return {
          ...state,
          items: {
            ...state.items,
            [productId]: newItem,
          },
        };
      } else {
        const { [productId]: _, ...items } = state.items;
        return {
          ...state,
          items,
        };
      }
    default:
      return state;
  }
};

const persistConfig = {
  key: 'cart',
  storage,
};

const persistedReducer = persistReducer(persistConfig, cartReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

export { store, persistor, addToCart, removeFromCart };

在我们的应用中，我们可以使用 addToCart 和 removeFromCart 方法来向购物车中添加或删除商品：

import { addToCart, removeFromCart } from './cart';

store.dispatch(addToCart({ id: 1, name: 'Macbook Pro', price: 1299 }));
store.dispatch(addToCart({ id: 2, name: 'iPhone 13', price: 799 }));
store.dispatch(removeFromCart(1, 1));

我们使用 Redux 持久化插件将购物车状态保存到本地，即使我们关闭或刷新页面，购物车的状态也会被还原。这样我们就可以更好地保存访问者在购物车中选择的商品。

结论

在这篇文章中，我们介绍了 Redux 持久化插件的用法。我们了解了如何将 store 中的状态保存到本地，以及一些配置选项的用法。

Redux 持久化插件有很多的应用场景，例如保存用户的登录状态、浏览器历史记录等。掌握 Redux 持久化插件的用法，可以让我们更好地管理应用的状态。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6735fb260bc820c582518c17