9 полезных инструментов для разработки React

• инструмент для проверки состояния приложения
• отслеживает изменения кода с помощью горячей перезагрузки
• трассировки стека отладки за действие

Против:

• настройка требует изменения кода в проекте

перевождите-неизменно состояние-инвариантное

• веб-сайт : npmjs.com/package/redux-immutable-state-invariant
• хранилище : github.com/leoasis/redux-immutable-state-invariant
• Звезды GitHub : 700+
• разработчик : leoasis
• текущая версия : 2.1.0
• Авторы: 10+

Промежуточное программное обеспечение, которое выдает ошибку при изменении состояния внутри или между диспетчерами. Редукторы предполагают, что аргументы не изменяют состояние. Каждый раз, когда редукторы возвращают состояние, это должен быть новый объект. Хорошей практикой является недопущение изменения состояния вне редуктора. Это требует много дисциплины от программиста. Итак, хорошая идея — автоматизировать эту проверку с помощью инструмента.

Инструмент полезен для выявления ошибок только во время разработки. Он выполняет много объектов копирования для обеспечения неизменности. Это означает высокое потребление памяти, что снижает производительность приложения. По этой причине не включайте этот инструмент в производство. Одной из идей является установка переменной окружения NODE_ENV , например, на production .

Чтобы использовать эту библиотеку в качестве промежуточного программного обеспечения:

 import { applyMiddleware, createStore } from 'redux'; let middleware = []; // Be sure to ONLY add this middleware in development! if (process.env.NODE_ENV !== 'production') { middleware.push(require('redux-immutable-state-invariant').default()); } const store = createStore( applyMiddleware(...middleware) ); по import { applyMiddleware, createStore } from 'redux'; let middleware = []; // Be sure to ONLY add this middleware in development! if (process.env.NODE_ENV !== 'production') { middleware.push(require('redux-immutable-state-invariant').default()); } const store = createStore( applyMiddleware(...middleware) ); 

Если вы не изменяете состояние, инструмент исчезает. Состояние изменения в диспетчере и между диспетчерами и инструментом выдает сообщение об ошибке. Он сохраняет ваши лучшие навыки программирования, как и любой хороший инструмент.

Плюсы:

• бесшовные и работает с любым рабочим процессом
• автоматизирует дисциплину программирования
• выдает ошибки с описательным сообщением

Против:

• большое количество объектов влияет на производительность, но включите это только в dev

перевождь-регистратор

• веб-сайт : npmjs.com/package/redux-logger
• хранилище : github.com/LogRocket/redux-logger
• Звезды GitHub : 4000+
• разработчик : LogRocket
• текущая версия : 3.0.6
• Авторы: 40+

Журнал действий для Redux. Захватывает действия диспетчера в консоли журнала браузера. Поставляется со многими опциями и позволяет понять каждое отправленное действие. По мере того, как действия распространяются по приложению, это захватывает и позволяет детализировать каждое действие. Каждая запись журнала фиксирует как предыдущее и текущее состояние, так и действия диспетчера. Думайте о каждом действии как о сообщении журнала. Регистратор позволяет вам увидеть, как эти сообщения выглядят, когда они меняют состояние в приложении.

Чтобы использовать регистратор, настройте его в хранилище Redux:

 import { applyMiddleware, createStore } from 'redux'; // Logger with default options import logger from 'redux-logger'; const store = createStore( applyMiddleware(logger) ); 

Убедитесь, что регистратор является последним аргументом в applyMiddleware поэтому он фиксирует действия. Доступны опции для изменения поведения регистратора. Вам нужно будет импортировать createLogger из createLogger redux-logger . Затем вызовите функцию createLogger с объектом параметров. Например, predicate указывает функцию, которая вызывается перед каждым действием. Doing (getState, action) => action.type !== UP_COUNT отфильтровывает действия, которые увеличивают количество. collapsed опция — это функция, которая возвращает true, если группа журналов должна свернуться. Doing (getState, action) => action.type === DOWN_COUNT сворачивает типы действий, которые уменьшают количество.

Плюсы:

• захватывает действия диспетчера, такие как сообщения журнала
• позволяет углубиться в каждое действие и проверить состояние приложения
• варианты позволяют настроить то, что захватывается

Против:

• только на стороне клиента, но вы можете отправлять сообщения с небольшим усилием

Вывод

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