v1 - template redux

Author: Catharina Mesquita

src/App.css

@@ -1,25 +1,14 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Provider } from 'react-redux';
+
+import store from './store'
+import ComponentList from './components/ComponentList';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <ComponentList />
+    </Provider>
   );
 }
 

src/App.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+export default function ComponentList() {
+
+  const qty = 20
+
+  const list = useSelector(
+      state => state.data.slice(0, qty)
+    , [qty]);
+  const dispatch = useDispatch();
+
+  function add(){
+    dispatch({ type: 'ADD_REDUCER', title: 'GrafQL'})
+  }
+
+  return (
+    <>
+      <ul>
+        {list.map( item => <li key={item}>{item}</li>)}
+      </ul>
+      <button type="button" onClick={add}>ADD</button>
+    </>
+  );
+}

src/App.test.js

@@ -1,12 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/components/ComponentList/index.js

@@ -0,0 +1,22 @@
+import { createStore } from 'redux'
+
+const INITIAL_STATE = {
+  data: [
+    'React Native',
+    'ReactJS',
+    'NodeJS'
+  ]
+}
+
+function reducer(state = INITIAL_STATE, action){
+  switch (action.type) {
+    case 'ADD_REDUCER':
+      return { ...state, data: [ ...state.data, action.title ]}
+    default:
+      return state;
+  }
+}
+
+const store = createStore(reducer)
+
+export default store;