debug with console.debug or redux-devtools

Author: danielrohers

src/components/Form/index.js

@@ -13,7 +13,7 @@ export const Form = () => {
   function _onSubmit(e) {
     e.preventDefault();
     const form = e.target;
-    dispatch(addTodo({ id: Date.now(), title: form.title.value }));
+    dispatch(addTodo({ id: Date.now(), name: form.name.value }));
     form.reset();
   }
 
@@ -23,7 +23,7 @@ export const Form = () => {
 
   return (
     <form onSubmit={_onSubmit}>
-      <Input required name="title" />
+      <Input required name="name" />
       <Button type="button" onClick={_clear}>Clear</Button>
     </form>
 

src/components/List/index.js

@@ -13,7 +13,7 @@ export const List = () => {
 
   const _item = (todo) => (
     <ListItem key={todo.id} className="List-item">
-      {todo.name} ({todo.species})
+      {todo.name}
       <Button onClick={() => dispatch(removeTodo(todo.id))}>x</Button>
     </ListItem>
   );

src/store/debug.js

@@ -0,0 +1,15 @@
+
+const withDevTools = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__;
+
+const devTools = withDevTools && window.__REDUX_DEVTOOLS_EXTENSION__.connect();
+
+const debug = (type, state) => {
+  if (withDevTools) {
+    devTools.send(type, state);
+    return;
+  }
+
+  console.debug('store', state);
+}
+
+export { debug };

src/store/index.js

@@ -1,5 +1,7 @@
 import React, { createContext, useContext, useReducer, useCallback } from 'react';
 
+import { debug } from './debug';
+
 import { initialState as todosState } from './todos/initialState';
 import { reducer as todosReducer } from './todos/reducer';
 
@@ -14,6 +16,7 @@ const reducers = {
 function reducer(state, action) {
   const { type } = action;
   const newState = !reducers[type] ? state : reducers[type](state, action);
+  debug(type, newState);
   return newState;
 }