Использование response-cookie в файле утилит

Question

Я использую Resact-cookie v2 в моем приложении "Реакция / Избыток". Чтобы установить cookie, вам нужно обернуть компонент в HOC withCookies(component)тогда вы можете использовать this.props.cookies.set('first_cookie', someCookie); установить печенье.

Тем не менее, я хотел бы установить свои куки в файле утилит, который все мои компоненты могут использовать для установки куки. Например.

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

Этот утилитный файл нельзя обернуть withCookies и, следовательно, не имеет куки напрямую. Я мог бы передать экземпляр куки с использованием компонента (setToCookies(cookiesInstance, key, value, options)), но я бы предпочел импортировать экземпляр cookie в файл утилит, если это возможно.

Это должно быть очень распространенным вариантом использования (для обработки файлов 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);
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 на вашем компоненте (withCookies(NameOfComponent)).
2. Используйте метод в компоненте как setToCookies(this.props.cookies, key, value, options);