Skip to content

Commit f5a77a0

Browse files
erickcm2kerickcm2k
committed
learning how to use usereducer
1 parent 4ea53bb commit f5a77a0

3 files changed

Lines changed: 33 additions & 2 deletions

File tree

‎playground/p1-playground/.eslintcache‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js":"1","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js":"2","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js":"3","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js":"4","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js":"5","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js":"6","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js":"7","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js":"8","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js":"9","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js":"10","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/Useref-test/UserefTest.js":"11"},{"size":362,"mtime":1606591730051,"results":"12","hashOfConfig":"13"},{"size":416,"mtime":1606781900557,"results":"14","hashOfConfig":"13"},{"size":500,"mtime":1606591730050,"results":"15","hashOfConfig":"13"},{"size":683,"mtime":1606683398069,"results":"16","hashOfConfig":"13"},{"size":557,"mtime":1606695677381,"results":"17","hashOfConfig":"13"},{"size":538,"mtime":1606685311789,"results":"18","hashOfConfig":"13"},{"size":291,"mtime":1606688360863,"results":"19","hashOfConfig":"13"},{"size":700,"mtime":1606694322341,"results":"20","hashOfConfig":"13"},{"size":748,"mtime":1606696241569,"results":"21","hashOfConfig":"13"},{"size":631,"mtime":1606696239209,"results":"22","hashOfConfig":"13"},{"size":1139,"mtime":1606787393253,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1cpnh77",{"filePath":"26","messages":"27","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js",["46","47","48"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js",["49"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/Useref-test/UserefTest.js",[],{"ruleId":"50","severity":1,"message":"51","line":1,"column":8,"nodeType":"52","messageId":"53","endLine":1,"endColumn":19},{"ruleId":"50","severity":1,"message":"54","line":2,"column":8,"nodeType":"52","messageId":"53","endLine":2,"endColumn":22},{"ruleId":"50","severity":1,"message":"55","line":3,"column":8,"nodeType":"52","messageId":"53","endLine":3,"endColumn":23},{"ruleId":"56","severity":1,"message":"57","line":12,"column":6,"nodeType":"58","endLine":12,"endColumn":13,"suggestions":"59"},"no-unused-vars","'StateEffect' is defined but never used.","Identifier","unusedVar","'ContextExample' is defined but never used.","'LanguageExample' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'duplicateCount' and 'printAt10'. Either include them or remove the dependency array.","ArrayExpression",["60"],{"desc":"61","fix":"62"},"Update the dependencies array to be: [count, duplicateCount, printAt10]",{"range":"63","text":"64"},[259,266],"[count, duplicateCount, printAt10]"]
1+
[{"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js":"1","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js":"2","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js":"3","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js":"4","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js":"5","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js":"6","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js":"7","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js":"8","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js":"9","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js":"10","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/Useref-test/UserefTest.js":"11","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Example.js":"12","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/UseReduce/UseReduce.js":"13"},{"size":362,"mtime":1606591730051,"results":"14","hashOfConfig":"15"},{"size":474,"mtime":1607122769263,"results":"16","hashOfConfig":"15"},{"size":500,"mtime":1606591730050,"results":"17","hashOfConfig":"15"},{"size":683,"mtime":1606683398069,"results":"18","hashOfConfig":"15"},{"size":557,"mtime":1606695677381,"results":"19","hashOfConfig":"15"},{"size":538,"mtime":1606685311789,"results":"20","hashOfConfig":"15"},{"size":291,"mtime":1606688360863,"results":"21","hashOfConfig":"15"},{"size":700,"mtime":1606694322341,"results":"22","hashOfConfig":"15"},{"size":748,"mtime":1606696241569,"results":"23","hashOfConfig":"15"},{"size":631,"mtime":1606696239209,"results":"24","hashOfConfig":"15"},{"size":1139,"mtime":1606787393253,"results":"25","hashOfConfig":"15"},{"size":271,"mtime":1606696194401,"results":"26","hashOfConfig":"15"},{"size":798,"mtime":1607126947957,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1cpnh77",{"filePath":"30","messages":"31","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js",["55","56","57","58"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js",[],["59","60"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js",["61"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/Useref-test/UserefTest.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Example.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/UseReduce/UseReduce.js",[],{"ruleId":"62","severity":1,"message":"63","line":1,"column":8,"nodeType":"64","messageId":"65","endLine":1,"endColumn":19},{"ruleId":"62","severity":1,"message":"66","line":2,"column":8,"nodeType":"64","messageId":"65","endLine":2,"endColumn":22},{"ruleId":"62","severity":1,"message":"67","line":3,"column":8,"nodeType":"64","messageId":"65","endLine":3,"endColumn":23},{"ruleId":"62","severity":1,"message":"68","line":4,"column":8,"nodeType":"64","messageId":"65","endLine":4,"endColumn":18},{"ruleId":"69","replacedBy":"70"},{"ruleId":"71","replacedBy":"72"},{"ruleId":"73","severity":1,"message":"74","line":12,"column":6,"nodeType":"75","endLine":12,"endColumn":13,"suggestions":"76"},"no-unused-vars","'StateEffect' is defined but never used.","Identifier","unusedVar","'ContextExample' is defined but never used.","'LanguageExample' is defined but never used.","'UserefTest' is defined but never used.","no-native-reassign",["77"],"no-negated-in-lhs",["78"],"react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'duplicateCount' and 'printAt10'. Either include them or remove the dependency array.","ArrayExpression",["79"],"no-global-assign","no-unsafe-negation",{"desc":"80","fix":"81"},"Update the dependencies array to be: [count, duplicateCount, printAt10]",{"range":"82","text":"83"},[259,266],"[count, duplicateCount, printAt10]"]

‎playground/p1-playground/src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import StateEffect from "./Components/State&Effect/State&Effect";
22
import ContextExample from "./Components/ContextExample/ContextExample";
33
import LanguageExample from "./Components/LanguageContext/Example";
44
import UserefTest from "./Components/Useref-test/UserefTest";
5+
import UseReduce from "./Components/UseReduce/UseReduce";
56
import React from "react";
67

78
function App() {
89
return (
910
<React.Fragment>
10-
<UserefTest/>
11+
<UseReduce />
1112
</React.Fragment>
1213
);
1314
}

‎playground/p1-playground/src/Components/UseReduce/UseReduce.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { useReducer } from "react";
2+
3+
const initialState = { count: 0 };
4+
5+
const reducer = (state, action) => {
6+
switch (action.type) {
7+
case "increment":
8+
return { count: state.count + 1 };
9+
case "decrement":
10+
return { count: state.count === 0 ? 0 : state.count - 1 };
11+
case "reset":
12+
return { count: 0 };
13+
default:
14+
throw new Error();
15+
}
16+
};
17+
const UseReduce = () => {
18+
const [state, dispatch] = useReducer(reducer, initialState);
19+
20+
return (
21+
<>
22+
<p>Current count is {state.count}</p>
23+
<button onClick={() => dispatch({ type: "increment" })}>+</button>
24+
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
25+
<button onClick={() => dispatch({ type: "reset" })}>Restart</button>
26+
</>
27+
);
28+
};
29+
30+
export default UseReduce;

0 commit comments

Comments
 (0)