#Решения государственного управления…

Что вам действительно нужно в вашем глобальном состоянии?

Понимание и внедрение Redux было моей первой любовью в React. В начале проекта я планировал, какое состояние мне понадобится в моем магазине Redux, а какое состояние может быть внутри состояния локального компонента. Это привело к тому, что код никогда не передавал props без Redux.

Этот метод работал хорошо для меня, однако он привел к нескольким большим редукторам. Это также затрудняло передачу кода другой команде для обслуживания. Это привело меня к вопросу, что мне действительно нужно в моем глобальном магазине? Как я могу его уменьшить?… Render Props

Я все еще использую Redux, но стараюсь ограничиться:

  • Информация о пользователе — (информация для входа, возможно, использует промежуточное ПО Redux)
  • Большие карты — если вам нужно отобразить большой список, который может потребовать разбиения на страницы. Я бы реализовал Redux и использовал локальную библиотеку хранения.
  • Ключевые данные — если вы можете определить наиболее важное состояние; таким образом, вам не нужно беспокоиться о передаче его в качестве реквизита слой за слоем за слоем.

Утилиты для рендеринга

Обычно мои обычные структуры папок src выглядят так:

источник

… источник/действия

… источник/компоненты

…компоненты/макеты

…components/UI (Здесь реализованы утилиты)

…компоненты/утилиты:где происходит волшебство Render Props

…src/pages (отправить на реагирующий маршрутизатор)

…источник/редукторы

Render Props можно было бы назвать компонентами No-Self-Render. Свойство рендеринга позволяет передавать состояние и методы другому компоненту. Это больше касается передачи логики и состояния, чем уровня представления. Именно здесь у меня было много раздувания в моем магазине Redux. Большинству компонентов не нужно знать, открыто ли меню. Render props позволяет мне поблагодарить некоторые редукторы навигации и взаимодействия за их службу и удалить их из моего кода.

Пример Render Prop Utility (Toggle)

https://gist.github.com/455ba210ff643340b9a0aaa9119d820d

import React, {Component, Fragment} from 'react';           components/utilities/toggle.js
class Toggle extends Component {                              
    state = {
        on: false
    };
    toggle = ()=> {
        this.setState({
            on: !this.state.on
        });
        console.log("on", this.state.on)
    };
    render() {
        const {render} = this.props;
        return (
            <> !--> Look up Fragments if you dont know it.
            {
                render(
                    {
                        on: this.state.on,
                        toggle: this.toggle
                    }
                )
            }
            </>
        )
    }
}

export default Toggle;

Использование Render Prop в поддельном меню

https://gist.github.com/0490c9d4bb25600a1498ca7d57eab131

import React, {Component, Fragment} from 'react';                       components/UI/Menu.js
import styled from 'styled-components';
import Toggle from '../utilities/toggle';
class Menu extends Component {
    render() {
        return (
            <div>
                <Toggle render = {({on, toggle})=>(
                    <div>
                        <Hamburger
                            onClick={toggle}
                        >
                            <Line>__</Line>
                            <Line>__</Line>
                            <Line>__</Line>
                        </Hamburger>
                        {on &&
                        <nav>
                            <li>Menu Item 1 </li>
                            <li>Menu Item 2 </li>
                            <li>Menu Item 3 </li>
                        </nav>}
                    </div>
                )}/>
            </div>
        );
    }
}
    const Line = styled.div`
    font-size: 25px;
    font-weight: bold;
    height: 8px;
`;
    const Hamburger = styled.div`
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height:40px;
    margin-bottom: 10px;
`;

export default Menu;

Другие варианты использования Toggle

  • Выпадающие списки
  • Формы
  • Оповещения

Резюме

Лучший способ ограничить размер хранилища Redux — реализовать потрясающую библиотеку утилит с использованием стилизованных компонентов (до тех пор, пока хуки не станут основным потоком). Исследуйте повторно используемые функции и передайте их другим. Это сделает ваш код более легким для чтения и выполнения. Это также позволит вам передать его другому разработчику, который не поднялся на гору Redux.