Изменить состояние в Redux DevTools Extension
В моем состоянии приложения есть значения, заданные как initialState.
С помощью React Developer Tools очень легко напрямую изменить какое-либо значение состояния.
Возможно ли что-либо подобное в Redux DevTools Extension, т.е. щелкните и вставьте новое значение для определенного свойства?
В этом SO anwer заявила, что возможно "изменить все, что вы хотите", но я не могу найти, как это сделать.
В области Состояние → Необработанные (см. рис. ниже) можно перезаписать значения, но, похоже, это не применяется.
![введите описание изображения здесь]()
Ответы
Ответ 1
Вы можете заставить отправлять действие, которое обновляет ваш объект (или вы можете набрать его вручную, в зависимости от того, что вам проще), а затем вы можете вызвать новую отправку прямо из инструмента с помощью следующей кнопки ![enter image description here]()
например, если вы хотите смоделировать сервер, вернувший объект в другом состоянии, просто отправьте действие, которое снова обновило объект с измененными полями.
Ответ 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: []
}),
...
}