如何使用 Redux-persist 持久化存储-JavaScript中文网-JavaScript教程资源分享门户

在现代化的 Web 应用中，客户端数据存储是一个非常重要的问题。使用 Redux 管理应用程序的状态是前端开发中的一种流行模式，Redux-persist 是一个用于持久化存储 Redux 状态的工具。

Redux-persist 简介

Redux-persist 是一个用于在应用程序关闭或刷新时将 Redux 状态存储到持久存储中，并在下次应用程序启动时从该存储中恢复 Redux 状态的工具。它在大多数现代化浏览器和移动设备上可用，并支持各种主流的存储引擎，如 LocalStorage、SessionStorage 和 IndexedDB。

Redux-persist 通过提供一个中间件来实现。该中间件在每次发送一个 Redux Action 时都会检查存储引擎中是否有新的状态需要存储。如果有，则将新状态写入存储引擎中。

Redux-persist 安装

要使用 Redux-persist，请先确保你的项目中已安装 Redux。然后，在控制台中输入以下命令安装 Redux-persist：

npm install redux-persist

或者，如果你使用 Yarn，请使用以下命令：

yarn add redux-persist

Redux-persist 配置

Redux-persist 的配置是非常简单的。我们只需要在项目中创建一个“persist 容器”，并将其存储引擎设置为我们想使用的存储引擎。

在项目源代码中，使用以下代码创建 Redux-persist 容器：

// javascriptcn.com 代码示例
import { persistStore } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: [/* ... */],
})

export const persistor = persistStore(store)

在这里，我们使用了 redux-persist 的 persistStore 函数来创建一个持久化存储容器。persistStore 函数需要一个 Redux store 作为参数，并将添加一个 Redux 中间件来处理持久化存储。

Storage 对象是 Redux-persist 的核心概念之一，我们使用 storage 对象来指定我们希望使用哪种类型的持久化存储方式。在上面的代码示例中，我们使用了 redux-persist/lib/storage 中的默认 LocalStorage 存储引擎。

在这个例子中，我们还定义了一个 persistConfig 对象，其中：

key 属性是我们要持久化的 Redux 状态对象的键名。
storage 属性是存储配置，指定要使用的存储引擎。

最后，我们将 persistStore 和 persistReducer 函数与 Redux store 集成，这样就能让 Redux-persist 的中间件在每次 Redux action 中自动处理存储操作。

Redux-persist 示例

下面是一个简单的 Redux-persist 示例，它演示了如何在应用程序中使用 Redux-persist 进行持久化存储。我们将编写一个 todo 应用程序，其中包含一个添加任务的表单和一个任务列表。

创建 Redux store

首先，让我们创建 Redux store：

// javascriptcn.com 代码示例
import { configureStore } from '@reduxjs/toolkit'
import { persistReducer, persistStore } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { combineReducers } from 'redux'
import todosReducer from './features/todos/todosSlice'

const rootReducer = combineReducers({
  todos: todosReducer,
})

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: [/* ... */],
})

export const persistor = persistStore(store)

创建完成之后，在项目中正常使用 Redux。

创建数据模型

我们需要一个包含任务标题和布尔值的任务数据模型。我们可以使用 Redux 工具包来定义：

// javascriptcn.com 代码示例
import { createSlice } from '@reduxjs/toolkit'

export const initialState = []

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.push({
        title: action.payload,
        completed: false,
      })
    },
  },
})

export const { addTodo } = todosSlice.actions

export default todosSlice.reducer

创建列表和表单

我们在创建数据模型中定义了一个 addTodo 假动作，接下来让我们在我们的组件中使用它：

// javascriptcn.com 代码示例
import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addTodo } from './todosSlice'

export function TodoList() {
  const todos = useSelector((state) => state.todos)
  const dispatch = useDispatch()
  const [newTodo, setNewTodo] = useState('')

  const handleChange = (event) => setNewTodo(event.target.value)

  const handleSubmit = (event) => {
    event.preventDefault()
    dispatch(addTodo(newTodo))
    setNewTodo('')
  }

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={newTodo} onChange={handleChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.title}>
            <input type="checkbox" checked={todo.completed} />
            {todo.title}
          </li>
        ))}
      </ul>
    </div>
  )
}

该组件依赖于 useState、useDispatch 和 useSelector 这三个钩子。当表单提交时，它使用 useDispatch 来分派一个 addTodo 假动作。任务对象的标题设置为用户在输入框内输入的文本。提交表单后，清空输入框。

此时我们打开浏览器，你会看到在输入框输入的任务被添加到列表中后，关闭浏览器，再次打开浏览器，我们发现之前添加的任务仍在列表中。

总结

使用 Redux-persist 可以帮助开发者在应用程序关闭或刷新时将 Redux 状态存储到持久存储中，并在下次应用程序启动时从该存储中恢复 Redux 状态的工具。使用 Redux-persist 配置也非常简单，通过提供一个包含存储引擎和特定键的配置对象来完成配置。在大多数浏览器和移动设备上都可用，并支持多种存储引擎，如 LocalStorage、SessionStorage 和 IndexedDB。在此，我建议开发者在开发现代化 Web 应用时应尽量使用此种存储的方式以避免应用程序数据丢失。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6535e2ad7d4982a6ebd96d54