#Решения государственного управления…
Что вам действительно нужно в вашем глобальном состоянии?
Понимание и внедрение 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.