#Решения за управление на държавата…

От какво наистина се нуждаете във вашето глобално състояние?

Разбирането и прилагането на Redux беше първата ми любов в React. В началото на проект бих планирал кое състояние ще ми трябва в моя магазин Redux и кое състояние може да бъде в състоянието на локалния компонент. Това доведе до базиран на код, който никога не пропуска подпори без Redux.

Този метод работи добре за мен, но доведе до няколко големи редуктора. Това също затрудни предаването на кода на друг екип за поддръжка. Това ме доведе до въпроса от какво наистина се нуждая в моя глобален магазин? Как мога да го намаля?...Render Props

Все още използвам Redux, но се опитвам да го огранича до:

  • Потребителска информация — (информацията за вход може да използва Redux мидълуер)
  • Големи карти — Ако трябва да изобразите голям списък, който може да изисква пагинация. Бих внедрил Redux и бих използвал локална библиотека за съхранение.
  • Ключови данни — Ако можете да идентифицирате състоянието, което е най-важно; по този начин не е нужно да се притеснявате да го предавате като подпори слой след слой след слой..

Render Prop Utilities

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

src

… src/действия

…src/компоненти

…компоненти/оформления

…components/UI (Помощните програми са внедрени тук)

…компоненти/Помощни програми:Където се случва магията на Render Props

… src/страници (изпращане до реагиращ маршрутизатор)

…src/редуктори

Render Props може да се нарече No-Self-Render компоненти. Проп за изобразяване ви позволява да предавате състояние и методи на друг компонент. Това е повече за предаване на логика и състояние, отколкото за слой за изглед. Тук имах много проблеми в моя Redux Store. Повечето компоненти не трябва да знаят дали дадено меню е отворено. Реквизитите за изобразяване ми позволяват да благодаря на някои редуктори за навигация и взаимодействие за тяхната услуга и да ги премахна от моя код.

Примерна помощна програма Render Prop (Превключване)

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.