Redux-cookiestorage 是一个基于 Redux 的 cookie 存储解决方案。它可以让你通过 cookie 实现跨页面的状态保存，适用于前端的多页应用场景。本文将介绍如何使用 redux-cookiestorage 以及在实际项目中的使用方法。
安装
首先，在安装 redux-cookiestorage 之前，需要安装 Redux。如果你还没有安装过 Redux，请执行以下命令安装：
npm install redux --save
接着，执行以下命令安装 redux-cookiestorage:
npm install redux-cookiestorage --save
使用方法
使用 redux-cookiestorage 的过程非常简单，只需要引入 createStorageMiddleware 方法，然后将其作为 applyMiddleware 的参数即可。
示例：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------------- ---- ---------------------- ------ ----------- ---- ------------- ----- ------------- - ------------------------- ---- ------- --- ----- ----- - ------------ ------------ ------------------------------ --
上面的代码中，首先我们通过 import 引入了 createStore 和 applyMiddleware 方法。接着，我们引入了 createStorageMiddleware 方法并将其实例化，传入一个 key 值。这个 key 值是我们存储在 cookie 中的数据的所属命名空间。最后，我们通过 applyMiddleware 将 cookieStorage 作为中间件应用到 store 中。
这时，我们就可以像使用普通的 Redux 运行程序一样操作了。我们可以使用 store.dispatch(action) 来 dispatch action，也可以使用 store.getState() 来获取当前 store 的 state。
实际应用
在实际应用中，我们可以通过在 action 中添加一个 { save: true } 属性来记录当前这个 action 需要存储在 cookie 中。比如：
export const incrementCounter = () => {
return {
type: 'INCREMENT_COUNTER',
save: true
};
};这时，当你 dispatch 这个 action 时，它的数据就会存储在 cookie 中了。
当然，我们也可以使用 Redux 的 subscribe 方法，来监听 store 的所有变化，然后自行判断哪些状态需要存储在 cookie 中。
下面是一个具体的示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----------------------- ---- ----------------------
------ ----------- ---- -------------
----- ------------- - -------------------------
---- -------
---
----- ----- - ------------
------------
------------------------------
--
------------------ -- -
----- ----- - -----------------
----- ----------- - ---
-- ----------------------- -
---------------- - -
----- ---------------
--
-
-- ------------------------ - -- -
---------------- - -
------ ----------------
--
-
-- -------------------------------- - -- -
-----------------------------------
-
---在上面的例子中，我们在 store 订阅的回调函数中，首先获取了当前 store 的状态。然后，根据我们的业务逻辑，决定哪些数据需要存储在 cookie 中。最后，我们判断存储的数据是否为空，如果不为空，就将其存储在 cookie 中。
关于 cookieStorage 的更多细节，可以查阅官方文档： https://github.com/abersager/redux-cookiestorage
总结
使用 Redux-cookiestorage 可以让前端的多页应用场景中，通过 cookie 轻松实现状态共享和持久化，同时又不需要借助其他技术手段实现。本文介绍了如何使用 Redux-cookiestorage，以及在实际项目中的使用方法，并通过示例代码展示了如何将状态存储在 cookie 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bc081e8991b448eb99c