在 React 中使用 Redux-persist 进行数据持久化的方法

在前端开发中，数据的持久化是一个很重要的问题。在 React 中，我们可以使用 Redux-persist 来实现数据的持久化。Redux-persist 是一个用于 Redux 的持久化库，它可以将 Redux store 中的数据存储到本地存储中，以便在刷新页面或关闭浏览器后仍能保留数据。在本文中，我们将详细介绍如何在 React 中使用 Redux-persist 进行数据持久化。

安装 Redux-persist

在使用 Redux-persist 之前，我们需要先安装它。可以通过 npm 来安装：

npm install --save redux-persist

配置 Redux-persist

在使用 Redux-persist 之前，我们需要先配置它。我们需要创建一个名为 persistConfig 的配置对象，并将其传递给 persistReducer 函数。persistConfig 对象包含以下属性：

• key：用于在本地存储中存储数据的键名。
• storage：用于存储数据的存储引擎。默认为 localStorage。
• whitelist：一个数组，包含需要持久化的 reducer 名称。

以下是一个示例配置：

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

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user'],
};

const rootReducer = combineReducers({
  user: userReducer,
  // ...
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

在上面的示例中，我们配置了一个名为 persistConfig 的配置对象，并将其传递给 persistReducer 函数。我们将 user reducer 添加到 whitelist 中，因此 Redux-persist 将只持久化 user reducer 中的数据。

创建 Redux Store

我们需要创建 Redux store，并将 persistedReducer 作为 reducer 传递给 createStore 函数。以下是一个示例代码：

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

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

在上面的示例中，我们创建了一个 Redux store，并将 persistedReducer 作为 reducer 传递给 createStore 函数。我们还使用 persistStore 函数创建了一个名为 persistor 的持久化对象。

在 React 中使用 Redux-persist

在 React 中使用 Redux-persist 非常简单。我们只需要将 store 和 persistor 传递给 Provider 组件即可。以下是一个示例代码：

// www.javascriptcn.com code example
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';
import { store, persistor } from './store';

const Root = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

export default Root;

在上面的示例中，我们将 store 和 persistor 传递给 Provider 组件，并使用 PersistGate 组件包装了 App 组件。PersistGate 组件会在加载时从本地存储中恢复数据，并在数据恢复完成后渲染 App 组件。

示例代码

以下是一个完整的示例代码：

// www.javascriptcn.com code example
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { PersistGate } from 'redux-persist/integration/react';
import Counter from './Counter';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['counter'],
};

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  counter: counterReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

const App = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Counter />
    </PersistGate>
  </Provider>
);

export default App;

在上面的示例中，我们创建了一个名为 Counter 的组件，它使用了 Redux store 中的 counter 数据。我们将 counter reducer 添加到 whitelist 中，因此 Redux-persist 将只持久化 counter reducer 中的数据。

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