Эстафета местного государственного управления. Как добавить и использовать флаг на стороне клиента? - PullRequest
Новая
       55

Эстафета местного государственного управления. Как добавить и использовать флаг на стороне клиента?

0 голосов
/ 30 мая 2019

Проблема:

Я хочу иметь простой логический флаг, который будет true при открытии модального режима и false при закрытии.И я хочу, чтобы другие компоненты реагировали реактивно, зависит от этого флага

Я надеюсь, что есть способ сделать это только с реле ( У Apollo есть решение для этого ).Я не хочу подключать редукс MOBX или что-то в этом роде (это просто логический флаг!).

Что у меня уже есть:

Возможно использовать commitLocalUpdate вЧтобы изменить ваше состояние.Действительно, я смог создать и изменить свой новый флаг следующим образом: 

class ModalComponent extends PureComponent {
    componentDidMount() {
        // Here I either create or update value if it exists
        commitLocalUpdate(environment, (store) => {  
            if (!store.get('isModalOpened')) {
                store.create('isModalOpened', 'Boolean').setValue(true);
            } else {
                store.get('isModalOpened').setValue(true);
            }
        });
    }

    componentWillUnmount() {
        // Here I mark flag as false
        commitLocalUpdate(environment, (store) => {
            store.get('isModalOpened').setValue(false);
        });
    }

    render() {
        // This is just react component so you have full picture
        return ReactDOM.createPortal(
            <div
                className={ styles.modalContainer }
            >
                dummy modal
            </div>,
            document.getElementById('modal'),
        );
    }
}

Задача:

Как реактивное обновление других компонентов зависит от этого флага? IЯ не могу получить свой флаг следующим образом: 


const MyComponent = (props) => {
    return (
    <QueryRenderer
        environment={ environment }
        query={ graphql`
            query MyComponentQuery {
                isModalOpened
            }`
        } //PROBLEM IS HERE GraphQLParser: Unknown field `isModalOpened` on type `Query`
        render={ ({ error, props: data, retry }) => {

            return (
                <div>
                    {data.isModalOpened}
                <div/>
            );
        } }
    />);
};

Поскольку компилятор Relay выдает мне ошибку: GraphQLParser: Unknown field 'isModalOpened' on type 'Query'.

И последняя проблема: Как избежать запроса к серверу? Эта информация хранится на стороне клиента, поэтому нет необходимости запрашивать ее.

Я знаю, что есть несколько похожих вопросов, таких как , и , .Но они не задают самую сложную часть реактивного обновления , а ответы устарели.

1 Ответ

1 голос
/ 30 мая 2019

Если вам нужно сохранить только один флаг, как вы сказали, я рекомендую вам использовать React Context вместо Relay.Вы можете сделать следующее:

  1. Добавить контекст в компонент приложения: 
const ModalContext = React.createContext('modal');

export class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isModalOpened: false
        }
    }

    toggleModal = (value) => {
        this.setState({
            isModalOpened: value
        })
    };

    getModalContextValue() {
        return {
            isModalOpened: this.state.isModalOpened,
            toggleModal: this.toggleModal
        }
    }

    render() {
        return (
            <ModalContext.Provider value={this.getModalContextValue()}>
                //your child components
            </ModalContext.Provider>
        )
    }

}
Получите значение из контекста везде, где вам нужно: 
const MyComponent = (props) => {
    const { isModalOpened } = useContext(ModalContext);

    return (
        <div>
            {isModalOpened}
        </div>
    );
};

Если вы воспользуетесь этим решением, вы избавитесь от использования дополнительных библиотек, таких как запросы на ретрансляцию и сервер.

...