Use merged reduxDevtools in examples

szhsin · Dec 28, 2022 · a23ae53 · a23ae53
1 parent 5ed4ce1
commit a23ae53
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/examples/examples/counter/Counter.tsx b/examples/examples/counter/Counter.tsx
@@ -17,7 +17,7 @@ const reducer = (state: number, { type, by = 1 }: { type: ActionTypes; by?: numb
 const persistMiddleware = persist({ prefix: 'counter-', getStorage: () => sessionStorage });
 
 const counterState = createState({
-  middleware: applyMiddleware(persistMiddleware, reduxDevtools)
+  middleware: applyMiddleware(persistMiddleware, reduxDevtools({ name: 'counterApp-state' }))
 })(
   0,
   (set, get) => ({

diff --git a/examples/examples/todo/todo.ts b/examples/examples/todo/todo.ts
@@ -4,7 +4,7 @@ import { reduxDevtools as devtoolsPlugin } from 'reactish-state/plugin';
 
 const persistMiddleware = persist({ prefix: 'todoApp-' });
 const state = createState({
-  middleware: applyMiddleware(immer, persistMiddleware, reduxDevtools)
+  middleware: applyMiddleware(immer, persistMiddleware, reduxDevtools({ name: 'todoApp-state' }))
 });
 
 interface Todo {
@@ -33,13 +33,13 @@ const todoListState = state(
         { type: 'todos/deleteItem', id }
       )
   }),
-  { key: 'todo-list' }
+  { key: 'todoList' }
 );
 
 type VisibilityFilter = 'ALL' | 'COMPLETED' | 'IN_PROGRESS';
 const visibilityFilterState = state('IN_PROGRESS' as VisibilityFilter, null, { key: 'filter' });
 
-const selector = createSelector({ plugin: devtoolsPlugin });
+const selector = createSelector({ plugin: devtoolsPlugin({ name: 'todoApp-selector' }) });
 const visibleTodoList = selector(
   todoListState,
   visibilityFilterState,
@@ -53,7 +53,7 @@ const visibleTodoList = selector(
         return todoList.filter(({ isCompleted }) => !isCompleted);
     }
   },
-  { key: 'visible-todos' }
+  { key: 'visibleTodos' }
 );
 
 const statsSelector = selector(