Изменить состояние в Redux DevTools Extension

В моем состоянии приложения есть значения, заданные как initialState.

С помощью React Developer Tools очень легко напрямую изменить какое-либо значение состояния.

Возможно ли что-либо подобное в Redux DevTools Extension, т.е. щелкните и вставьте новое значение для определенного свойства?

В этом SO anwer заявила, что возможно "изменить все, что вы хотите", но я не могу найти, как это сделать.

В области Состояние → Необработанные (см. рис. ниже) можно перезаписать значения, но, похоже, это не применяется.

Ответ 1

Вы можете заставить отправлять действие, которое обновляет ваш объект (или вы можете набрать его вручную, в зависимости от того, что вам проще), а затем вы можете вызвать новую отправку прямо из инструмента с помощью следующей кнопки

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

Ответ 2

Одним из основных принципов магазина Redux является то, что его можно изменять только с помощью функций редуктора, когда отправляется действие.

Поэтому я не думаю, что можно изменить состояние хранилища в Redux DevTools, но, по крайней мере, вы можете путешествовать по времени или напрямую подавлять выбранные действия (которые я часто делаю для имитации, что запрос AJAX все еще ожидается).

Если вы действительно хотите изменить состояние своего хранилища, вы можете назначить хранилище (когда оно создано через createStore) на window._store, а затем вызвать window._store.dispatch({type: "...", ...}); непосредственно из Консоли.

Ответ 3

Самое замечательное в Redux Devtools - он хорошо придерживается принципов Redux. Единственный способ изменить состояние - отправить action с любыми пользовательскими параметрами, а затем позволить редуктору обрабатывать логику изменения состояния. Это является предпочтительным, поэтому он придерживается второго принципа (состояние только для чтения) и третьего принципа Redux, который гласит:

Изменения сделаны с чистыми функциями

Чтобы указать, как дерево состояний преобразуется с помощью действий, вы пишете чистые редукторы.

Таким образом, способ изменения состояния состоит в том, чтобы определить конкретное действие, которое изменяет часть состояния, которую вы хотите, через редуктор.

Для этого есть очень важная причина - таким образом вы можете проверить любое состояние, которое вы пытаетесь проверить, на самом деле это возможное состояние, в котором может оказаться ваше приложение. Если вы мутировали кусочки состояния Возможно, ваше приложение никогда не достигнет этого состояния.

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

Ответ 4

Нет - в настоящее время невозможно вручную изменить состояние.

Смотрите эту проблему в репозитории Redux DevTools; сопровождающий намеревается в конечном итоге реализовать эту функцию:

Я реализую его после 3.0, когда закончу переписывание расширений и новый пользовательский интерфейс. В дополнение к состояниям, план также должен редактировать отправленные действия, изменяя полезные нагрузки. И, если есть интерес, дублирующие действия; поэтому после редактирования будет 2 варианта перезаписать текущий (и пересчитать состояния) или отправить как новое действие.

Ответ 5

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

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


// quick what to add the 'selected' feature to my store; 
// the state store will update once I dispatch { type: 'HACK' }

export default createReducer(initialState, {
  HACK: state => ({
    ...state,
    selected: []
  }),
...
}