Removing containers + adding redux storybook addon

Author: jbarroso

.storybook/addons.js

@@ -0,0 +1,3 @@
+import addons from '@storybook/addons';
+import registerRedux from 'addon-redux/register';
+registerRedux(addons);

.storybook/decorators.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import addons from '@storybook/addons';
+import withReduxCore from 'addon-redux/withRedux';
+import store from './store';
+
+export const withRedux = (state, actions) => withReduxCore(addons)({
+  Provider, store, state, actions
+})

.storybook/main.js

@@ -4,6 +4,6 @@ module.exports = {
     '@storybook/preset-create-react-app',
     '@storybook/addon-actions',
     '@storybook/addon-links',
+    'addon-redux/register',
   ],
 };
-

.storybook/store.js

@@ -0,0 +1,5 @@
+import { createStore } from 'redux';
+import withReduxEnhancer from 'addon-redux/enhancer'
+import initialState from '../src/reducers/initialState';
+
+export default createStore((state = initialState, _) => state, withReduxEnhancer);

package-lock.json

@@ -81,6 +81,7 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.1.1",
     "@storybook/react": "^5.3.19",
+    "addon-redux": "^1.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",

package.json

@@ -1,24 +1,32 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
 
 import 'todomvc-app-css/index.css';
 
-import Header from '../containers/Header';
-import MainSection from '../containers/MainSection';
-import Footer from '../containers/Footer';
+import Header from './Header';
+import MainSection from './MainSection';
+import Footer from './Footer';
+
+import {
+  getCompletedTodoCount,
+  getActiveTodoCount,
+  getTodosCount,
+} from '../selectors';
+import { fetchTodos } from '../actions';
 
 import * as types from '../constants/TodoFilters';
 
-const App = ({
-  fetchTodos,
-  todosCount,
-  activeTodoCount,
-  completedCount,
-  nowShowing,
-}) => {
+const App = ({ nowShowing }) => {
+  const todosCount = useSelector(getTodosCount);
+  const activeTodoCount = useSelector(getActiveTodoCount);
+  const completedCount = useSelector(getCompletedTodoCount);
+
+  const dispatch = useDispatch();
+
   useEffect(() => {
-    fetchTodos();
-  }, [fetchTodos]);
+    dispatch(fetchTodos());
+  }, [dispatch]);
 
   return (
     <section className="todoapp">
@@ -36,15 +44,11 @@ App.defaultProps = {
 };
 
 App.propTypes = {
-  fetchTodos: PropTypes.func.isRequired,
   nowShowing: PropTypes.oneOf([
     types.ALL_TODOS,
     types.ACTIVE_TODOS,
     types.COMPLETED_TODOS,
   ]),
-  todosCount: PropTypes.number.isRequired,
-  activeTodoCount: PropTypes.number.isRequired,
-  completedCount: PropTypes.number.isRequired,
 };
 
 export default App;