npm 包 redux-effects-universal-cookie 使用教程

简介

在前端开发中，我们常常需要对浏览器中的 Cookie 进行操作。而针对 Redux 这样的状态管理器来说，redux-effects-universal-cookie 是一个非常好用的 npm 包。

redux-effects-universal-cookie 包提供了一个包装器，使得在 Redux 中操作浏览器 Cookie 成为了一件非常容易的事情。

安装

首先，在你的项目中安装 redux 和 redux-effects-universal-cookie：

npm install --save redux redux-effects-universal-cookie

初始化

要在你的项目中使用 redux-effects-universal-cookie，你需要在 createStore 函数中进行一些配置。

首先，你需要导入 createCookieMiddleware 函数，并设置 cookieMiddleware 变量：

import { createStore, applyMiddleware } from 'redux';
import { createCookieMiddleware } from 'redux-effects-universal-cookie';

const cookieMiddleware = createCookieMiddleware();

然后，将 cookieMiddleware 与你的 Store 进行连接：

const store = createStore(
  reducer, // 你的 reducer
  applyMiddleware(cookieMiddleware) // 设置 cookieMiddleware 中间件
);

使用

现在，你已经配置好了 redux-effects-universal-cookie，接下来我们来看看如何使用它。

设置 Cookie

要在 Redux 中设置 Cookie，你需要使用 setCookie 函数。示例代码如下所示：

import { setCookie } from 'redux-effects-universal-cookie';

// 在 Redux Action 中调用 setCookie 函数
export function setUserName(name) {
  return dispatch => {
    dispatch(setCookie('name', name));
  };
}

setCookie 函数需要两个参数，第一个参数是 Cookie 名称，第二个参数是 Cookie 值。在上面的例子中，我们在 Redux Action 中调用了 setCookie 函数以设置 name Cookie 的值为传入的 name。

获取 Cookie

要在 Redux 中获取 Cookie，你只需要使用 getCookie 函数即可。示例代码如下所示：

-- -------------------- ---- -------
------ - --------- - ---- ---------------------------------

-- - ----- ------- --- --------- --
------ ------- -------- ------------- - ------------- ------- -
  ------ ------------- -
    ---- ------------
      ----- ---- - ---------------
      ----- ---------- - ------------------
      ------ - --------- ----- ---------- - ---------- - ---- --
    --------
      ------ ------
  -
-

在上面的例子中，我们在 Redux Reducer 中调用了 getCookie 函数。如果 name Cookie 已经存在于浏览器中，我们会返回 Cookie 的值；如果不存在，我们会返回默认的 state，此处为 name。

删除 Cookie

要在 Redux 中删除 Cookie，你需要使用 deleteCookie 函数。示例代码如下所示：

import { deleteCookie } from 'redux-effects-universal-cookie';

// 在 Redux Action 中调用 deleteCookie 函数
export function logOut() {
  return dispatch => {
    dispatch(deleteCookie('name'));
  };
}

deleteCookie 函数需要一个参数，即你要删除的 Cookie 名称。在上面的例子中，我们在 Redux Action 中调用了 deleteCookie 函数以删除 name Cookie。

总结

在这篇文章中，我们学习了如何在 Redux 中使用 npm 包 redux-effects-universal-cookie。

我们先介绍了安装和初始化这个库，接着介绍了如何在 Redux Action 或 Reducer 中设置、获取和删除 Cookie。

了解这些操作，你将能轻松地在 Redux 中操作 Cookie，并为你的 React 应用程序带来更丰富的交互体验。

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