在前两篇文章中，我们介绍了 Redux 的概念以及如何使用 Redux 管理 React 项目中的 session localStorage。本文将介绍如何正确地使用 Redux 来管理 web 应用程序中的用户会话（Session）以及相应的 localStorage。
引言
在传统的 web 应用程序中，用户的会话状态保存在服务器上，而在现代的 SPA（Single-Page Application）中，许多人选择将客户端（Client）和服务器（Server）之间的通信过程最小化。在这种情况下，用户会话状态常常在客户端被存储为一个对象，该对象通常被存储在浏览器的 localStorage 中。
如果您正在构建一个 SPA，您可能会需要许多组件共享在 localStorage 中存储的状态。为了解决这个问题，我们可以使用 Redux。Redux 允许我们将状态存储在一个单一的地方，并使组件能够轻松地访问这些状态。
下面，我们将介绍如何使用 Redux 来管理 web 应用程序中的用户会话状态以及相应的 localStorage。
使用 Redux 管理 web 应用程序中的会话状态
为了使您的 web 应用程序能够正确地管理用户会话状态，您需要定义以下三种类型的 actions：
- 登陆 (Login) — 该 action 负责保存用户登录后的状态。当用户成功登录时，该 action 会将用户的 Token，用户名，以及其他必要的信息保存在 Redux store 中。
- 注销 (Logout) — 该 action 负责清除用户的会话状态。当用户注销登录时，该 action 会将用户的信息从 Redux store 中清除。
- 更新 (Update) — 该 action 负责更新用户的信息。当用户的信息发生变化时，该 action 会将变化的信息保存在 Redux store 中。
以下是一个示例 action：
export const LOGIN_USER = 'LOGIN_USER';
export function login(token, username) {
return {
type: LOGIN_USER,
payload: { token, username },
};
}在上面的代码中，我们定义了一个名为 LOGIN_USER 的 action。当该 action 被调用时，会将用户的 Token 和用户名作为 payload 保存在 store 中。
接下来，我们需要为这些 action 添加相应的 reducers。Reducer 是一个纯函数，它接收一个 action 和旧的 state，然后返回一个新的 state。在 Redux store 中，Reducer 负责更新和检索状态。
以下是一个示例 reducer：
-- -------------------- ---- -------
------ - ---------- - ---- ------------
------ ------- -------- ------------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------------
--------- ------------------------
--
--------
------ ------
-
-在上面的代码中，我们定义了一个 reducer，它可以接收一个名为 LOGIN_USER 的 action。当该 action 被调用时，reducer 会将 token 和 username 添加到当前 store 中的状态。
最后，我们需要将 reducers 添加到 Redux store 中：
import { createStore, combineReducers } from 'redux';
import userReducer from './userReducer';
const rootReducer = combineReducers({
user: userReducer,
});
const store = createStore(rootReducer);在上述代码中，我们使用 combineReducers() 函数将 reducers 组合到一个根 reducer 中。然后，我们使用 createStore() 函数创建一个新的 store。
最后，我们可以在 React 组件中使用 store。
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ----- - ---- ------------
-------- ----------- -
----- -------- - --------------
----- ----------- - -- -- -
----- ----- - -------------
----- -------- - ----------------
--------------------- -----------
--
------ -
--
------- ------------------------------------
---
--
-
-------- ------------- -
----- ---- - ------------------- -- ------------
------ -
--
----------- ----- ---------------------
---
--
-在上述代码中，我们使用 useSelector() hook 获取当前的用户状态，并使用 login() action 将用户状态保存到 store。然后，我们在 UserProfile 组件中获取用户状态。
使用 Redux 管理 localStorage
在前面的例子中，我们展示了如何使用 Redux 来管理用户会话状态。现在来看一下如何使用 Redux 来管理 web 应用程序中的 localStorage。
我们将 localStorage 封装在单独的仓库（Repository）中。仓库是一个纯 JavaScript 对象，它提供了一些帮助函数，用于在 localStorage 中读取和写入数据。
以下是一个示例代码：
-- -------------------- ---- -------
----- ---------------------- - -
--------- -
--- -
------ --------------------------------------
- ----- --- -
------ -----
-
--
---------- ------ -
------------------------- -----------------------
--
------- -
---------------------
--
----------- -
-----------------------------
--
--在上面的代码中，我们定义了一个 localStorageRepository 对象，它封装了 localStorage 的读取和写入操作。该对象提供了一个简单的接口，用于读取和写入保存在 localStorage 中的数据。
现在我们来看一下如何在 Redux 中集成 localStorageRepository 对象。
首先，我们需要为 localStorageRepository 编写 Reducer：
-- -------------------- ---- -------
------ - ---------- - ---- ------------
------ ---------------------- ---- ---------------------------
----- ------------ - ----------------------------------- -- ---
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
----- -------- - -
---------
------ ---------------------
--------- ------------------------
--
------------------------------------ ----------
------ ---------
--------
------ ------
-
-在上述代码中，我们将初始化 state 设置为从 localStorage 中读取的用户数据，然后在 LOGIN_USER action 中更新 state，并将其写入 localStorage。
最后，我们可以像使用普通的 Redux store 一样，使用我们的 localStorage 对象。
import { createStore, combineReducers } from 'redux';
import userReducer from './userReducer';
const rootReducer = combineReducers({
user: userReducer,
});
const store = createStore(rootReducer);当设置 localStorage 时需注意，将状态直接保存在 localStorage 中可能会导致存储量过大。可以考虑存储一个标记（token）然后以该 token 为索引到一个具体的对象里。
结论
本文介绍了如何使用 Redux 来管理 web 应用程序中的用户会话状态以及相应的 localStorage。我们已经学习了如何定义 actions，reducer，以及如何在组件中使用这些数据。我们还介绍了如何将 localStorage 封装在一个 Repository 中，并将其与 Redux 衔接。希望这个教程可以对你有所帮助，让你的 web 应用程序更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714cd26ad1e889fe215ddc0