在util文件中使用react-cookie

Question

我在我的react / redux應用程序中使用react-cookie v2。 要設置cookie，您需要將組件包裝在HOC withCookies(component) ，然后可以使用this.props.cookies.set('first_cookie', someCookie); 設置一個cookie。

但是，我想在所有文件都可以用來設置cookie的util文件中設置cookie。 例如。

storageUtil.js
export const setToCookies = (key, value, options) => {
    cookies.set(key, value, options);
};

該withCookies程序文件不能與withCookies一起包裝，因此不直接包含Cookie。 我可以從using組件（ setToCookies(cookiesInstance, key, value, options) ）中傳入cookie實例，但是我寧願以某種方式在實用程序文件中導入cookie實例。

這必須是一個非常普通的用例（以處理util文件中的cookie），我只是不知道執行此操作的最佳方法。

Answer 1

我將編寫在尋找通用解決方案時發現可以使用的兩種方法。 如果提供更好的解決方案，我將更改接受的答案。

解決方案1：

withCustomCookies.js

import React from 'react';
import { withCookies } from 'react-cookie';

export function withCustomCookies(Component) {

    return (props) => {
        // CookieComponent needs a capital letter bc of JSX
        let ExtendedCookieComponent = withCookies(withEncapsulatedCookies(Component));

        return (
            <ExtendedCookieComponent
                {...props} />
        );
    };
}

export function withEncapsulatedCookies(Component) {

    return (props) => {
        // Only expose our own cookies methods defined in this scope
        const {
            // Dont expose cookies in using component
            cookies, // eslint-disable-line no-unused-vars
            ...cleanedProps
        } = props;

        function getFromCookies(key) {
            // Stuff to always do when getting a cookie
            return cookies.get(key);
        }

        function setToCookies(key, value, options) {
            // Stuff to always do when setting a cookie
            cookies.set(key, value, options);
        }

        return (
            <Component
                getFromCookies={getFromCookies}
                setToCookies={setToCookies}
                {...cleanedProps} /> // All Props except for cookies
        );
    };
}

用作：

1. export default withCustomCookies(Component);導入和包裝export default withCustomCookies(Component);
2. 像這樣在組件內部使用this.props.getFromCookies(COOKIE_NAME);

解決方案2：

使用常規的cookieUtils文件並傳遞cookie：

cookieUtils.js
export const setToCookies = (cookies, key, value, options) => {
   // Stuff to always do when setting a cookie
   cookies.setCookie(key, value, options);
};

用於：

1. 在您的組件中導入setToCookies並在您的組件（ withCookies(NameOfComponent) ）上使用withCookies。
2. 使用組件中的方法作為setToCookies(this.props.cookies, key, value, options);