Devtools для React Easy State?

Question

Я просто переключаюсь с избыточности, есть ли какие-либо инструменты для проверки или даже манипулирования реагирующими магазинами Easy State с целью разработки, или у вас есть какие-либо хорошие практики Tipps для этого? Возможно ли будет console.log текущего состояния при каждом изменении?

Answer 1

У нас еще нет devtool, но это часто запрашиваемая функция. Это в нашей повестке дня, и мы уже собираем данные о том, что люди ожидают от devtool. Оооо ... какие функции должны быть в devactol состояния React для вас?

О временной шкале: мы выпустим лучшие документы, линтер и, возможно, строгий режим перед devtool. У нас уже есть очень простой c devtool примитив (который просто записывает много данных), который можно было бы использовать тем временем. Хотя это никогда не будет официальный API, и мы просто удалим его в более позднем выпуске. Вы заинтересованы? Должны ли мы выпустить его как временное решение?

Возможно ли установить console.log текущего состояния при каждом изменении?

Конечно:

import { store, autoEffect } from '@risingstack/react-easy-state'

const myStore = store({
  name: 'Bob'
})

autoEffect(() => console.log(JSON.stringify(myStore, null, 2)))

// logs `{ name: 'Ann' }`
myStore.name = 'Ann'

(я автор React Easy State)

Answer 2

Если вы используете глобальные хранилища, например:

const myStore = store({
 a: 1
});

Вы можете назначить их объекту окна, чтобы в вашем chrome / firefox devtools вы могли сделать что-то вроде:

window.__EASY_STORES__ = {
 MY_STORE: myStore
}

Затем вы можете изменить этот объект в консоли, и это должно отразиться на рендеринге, если ваши компоненты обернуты в view.

Кроме того, в настоящее время обсуждается создание целого набора devtools в сообществе, но на данный момент мы не предоставляем готового инспектора или инструментов для разработки библиотеки.

Answer 3

Действительно возможно регистрировать изменения состояния, используя middleware . Простое промежуточное программное обеспечение для журналирования может выглядеть следующим образом (оно набрано Flow ):

export default (store: Store<ReduxState>) => (
  next: (action: Action) => ReduxState
) => (action: Action) => {
  console.log(`dispatching: ${action.type}`)
  const result = next(action)
  console.log(`next state: ${JSON.stringify(store.getState())}`)
  return result
}

Манипулирование - это совсем другое. Вы можете создать "cli" - я недавно сделал это в проекте . По сути, это просто функция JS, доступная для консоли браузера.

Или, я бы предложил использовать плагин для браузера. Наиболее известным, вероятно, является «Redux DevTools», который доступен по крайней мере для Firefox и Chrome. Он дает вам CRUD-контроль (создание, чтение, обновление, удаление) над redux -состоянием.

Редактировать: Поскольку я фатально неправильно прочитал ваш вопрос, этот комментарий на GitHub может вас заинтересовать. Кажется, не очень активные сопровождающие ^^ Но извините, я ничего не знаю о easy-state.