Criando o projeto

Author: acmesquita

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "templete-redux",
+  "name": "notes-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/components/ComponentList/index.js

@@ -1,26 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
 
 export default function ComponentList() {
 
   const qty = 20
+  const [text, setText] = useState('')
 
   const list = useSelector(
-      state => state.exampleReducer.data.slice(0, qty)
+    state => state.exampleReducer.data.slice(0, qty)
     , [qty]);
   const dispatch = useDispatch();
 
-  function add(){
-    dispatch({ type: Types.ADD, title: 'GrafQL'})
+  function add() {
+    dispatch({ type: Types.ADD, title: text })
   }
 
   return (
     <>
+      <textarea
+        cols={100}
+        rows={10}
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button type="button" onClick={add}>ADD</button>
       <ul>
-        {list.map( item => <li key={item}>{item}</li>)}
+        {list.map(item => <li key={item}>{item}</li>)}
       </ul>
-      <button type="button" onClick={add}>ADD</button>
     </>
   );
 }

src/store/reducer/example-reducer.js

@@ -9,15 +9,11 @@ export const { Types, Creators } = createActions({
 })
 
 const INITIAL_STATE = {
-  data: [
-    'React Native',
-    'ReactJS',
-    'NodeJS'
-  ]
+  data: []
 }
 
 const add = (state = INITIAL_STATE, action) => {
-  return { ...state, data: [ ...state.data, action.title ]}
+  return { ...state, data: [...state.data, action.title] }
 }
 
 /**