Различия

Показаны различия между двумя версиями страницы.

--- redux_devtools_-_instrumenti_rozrobnika [2024/08/18 09:25]
tro создано
+++ redux_devtools_-_instrumenti_rozrobnika [2024/08/18 13:55] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Redux DevTools - Інструменти розробника ======
-  - [[https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd|Redux DevTools - розширення для Google Chrome]]
+  - Встановити [[https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd|Redux DevTools - розширення для Google Chrome]]
+===== Якщо використовується старий формат Redux  =====
+Далі встановлюємо бібліотеку, яка дозволить ініціалізувати логіку Redux DevTools та зв'язати її з розширенням в інструментах розробника.
+<code>
+npm install @redux-devtools/extension
+</code>
+. імпортуємо функцію devToolsEnhancer і використовуємо її при створенні стора, передавши її результат третім аргументом, замість початкового стану.
+<code>
+// src/redux/store.js
+import { createStore } from "redux";
+import { devToolsEnhancer } from "@redux-devtools/extension";
+const initialState = {
+  tasks: [
+    { id: 0, text: "Learn HTML and CSS", completed: true },
+    { id: 1, text: "Get good at JavaScript", completed: true },
+    { id: 2, text: "Master React", completed: false },
+    { id: 3, text: "Discover Redux", completed: false },
+    { id: 4, text: "Build amazing apps", completed: false },
+  ],
+  filters: {
+    status: "all",
+  },
+};
+const rootReducer = (state = initialState, action) => {
+  return state;
+};
+// Створюємо розширення стора, щоб додати інструменти розробника
+const enhancer = devToolsEnhancer();
+export const store = createStore(rootReducer, enhancer);
+</code>
+===== Для нового Redux Toolkit =====
+Нічого додатково робити не треба. Тільки встановити розширення для браузера