Redux: Redux toolkit implemented

Author: dhnchandan

.env

@@ -1 +1,2 @@
 PORT=3500
+NODE_ENV=development

package.json

@@ -33,6 +33,7 @@
 		]
 	},
 	"dependencies": {
+		"@reduxjs/toolkit": "^1.5.0",
 		"@testing-library/jest-dom": "^5.11.9",
 		"@testing-library/react": "^11.2.3",
 		"@testing-library/user-event": "^12.6.2",
@@ -43,7 +44,9 @@
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
 		"react-dotenv": "^0.1.3",
+		"react-redux": "^7.2.2",
 		"react-scripts": "4.0.1",
+		"redux-logger": "^3.0.6",
 		"typescript": "^4.1.3",
 		"web-vitals": "^1.1.0"
 	},
@@ -53,6 +56,8 @@
 		"@storybook/addon-essentials": "^6.1.15",
 		"@storybook/addon-links": "^6.1.15",
 		"@storybook/react": "^6.1.15",
+		"@types/react-redux": "^7.1.16",
+		"@types/redux-logger": "^3.0.8",
 		"@typescript-eslint/eslint-plugin": "^4.14.1",
 		"@typescript-eslint/parser": "^4.14.1",
 		"eslint": "^7.18.0",

public/env.js

@@ -1,12 +1,12 @@
 window.env = {
 	ALLUSERSPROFILE: "C:\\ProgramData",
-	ANDROID_HOME: "C:\\Users\\phpch\\AppData\\Local\\Android\\Sdk",
+	ANDROID_HOME: "%LOCALAPPDATA%\\Android\\Sdk",
 	ANDROID_SDK_ROOT: "C:\\Users\\phpch\\AppData\\Local\\Android\\Sdk",
 	APPDATA: "C:\\Users\\phpch\\AppData\\Roaming",
 	ChocolateyInstall: "C:\\ProgramData\\chocolatey",
 	ChocolateyLastPathUpdate: "132555791491835955",
 	ChocolateyToolsLocation: "C:\\tools",
-	CHROME_CRASHPAD_PIPE_NAME: "\\\\.\\pipe\\crashpad_2968_WLOWMBROSLPNURMF",
+	CHROME_CRASHPAD_PIPE_NAME: "\\\\.\\pipe\\crashpad_26736_NLCGGZRTSNEVNFDG",
 	COLORTERM: "truecolor",
 	CommonProgramFiles: "C:\\Program Files\\Common Files",
 	"CommonProgramFiles(x86)": "C:\\Program Files (x86)\\Common Files",
@@ -31,6 +31,7 @@ window.env = {
 	MOZ_PLUGIN_PATH:
 		"C:\\PROGRAM FILES (X86)\\FOXIT SOFTWARE\\FOXIT READER\\plugins\\",
 	NODE: "C:\\Program Files\\nodejs\\node.exe",
+	NODE_ENV: "development",
 	npm_config_argv:
 		'{"remain":[],"cooked":["run","start"],"original":["start"]}',
 	npm_config_bin_links: "true",
@@ -60,9 +61,12 @@ window.env = {
 	npm_package_dependencies_react: "^17.0.1",
 	npm_package_dependencies_react_dom: "^17.0.1",
 	npm_package_dependencies_react_dotenv: "^0.1.3",
+	npm_package_dependencies_react_redux: "^7.2.2",
 	npm_package_dependencies_react_scripts: "4.0.1",
+	npm_package_dependencies_redux_logger: "^3.0.6",
 	npm_package_dependencies_typescript: "^4.1.3",
 	npm_package_dependencies_web_vitals: "^1.1.0",
+	npm_package_dependencies__reduxjs_toolkit: "^1.5.0",
 	npm_package_dependencies__testing_library_jest_dom: "^5.11.9",
 	npm_package_dependencies__testing_library_react: "^11.2.3",
 	npm_package_dependencies__testing_library_user_event: "^12.6.2",
@@ -88,6 +92,8 @@ window.env = {
 	npm_package_devDependencies__storybook_react: "^6.1.15",
 	npm_package_devDependencies__typescript_eslint_eslint_plugin: "^4.14.1",
 	npm_package_devDependencies__typescript_eslint_parser: "^4.14.1",
+	npm_package_devDependencies__types_react_redux: "^7.1.16",
+	npm_package_devDependencies__types_redux_logger: "^3.0.8",
 	npm_package_eslintConfig_extends_0: "react-app",
 	npm_package_eslintConfig_extends_1: "react-app/jest",
 	npm_package_husky_hooks_pre_commit: "lint-staged",
@@ -115,7 +121,7 @@ window.env = {
 	ORIGINAL_XDG_CURRENT_DESKTOP: "undefined",
 	OS: "Windows_NT",
 	Path:
-		"C:\\Users\\phpch\\AppData\\Local\\Temp\\yarn--1611732138449-0.8781164243421082;G:\\---WorkFiles\\starter\\react-starter-ts\\node_modules\\.bin;C:\\Users\\phpch\\AppData\\Local\\Yarn\\Data\\link\\node_modules\\.bin;C:\\Users\\phpch\\AppData\\Local\\Yarn\\bin;C:\\Program Files\\libexec\\lib\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Program Files\\lib\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Program Files\\PowerShell\\7;C:\\Python39\\Scripts\\;C:\\Python39\\;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\Python38\\Scripts\\;C:\\Python38\\;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Windows\\System32\\OpenSSH\\;C:\\ProgramData\\chocolatey\\bin;C:\\Program Files\\Git\\cmd;C:\\Program Files (x86)\\Yarn\\bin\\;C:\\jdk-15\\bin;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Program Files\\Amazon\\AWSCLIV2\\;C:\\Program Files (x86)\\Gpg4win\\..\\GnuPG\\bin;C:\\Users\\phpch\\AppData\\Roaming\\Python\\Python38\\site-packages;C:\\Program Files\\Redis\\;C:\\Users\\phpch\\AppData\\Roaming\\npm;C:\\Program Files\\MongoDB\\Server\\4.4\\bin;C:\\Go\\bin;C:\\composer;G:\\xampp7\\php;C:\\Program Files\\PowerShell\\7\\;C:\\Program Files\\nodejs\\;C:\\Program Files\\Docker\\Docker\\resources\\bin;C:\\ProgramData\\DockerDesktop\\version-bin;C:\\Python39\\Scripts\\;C:\\Python39\\;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\Python38\\Scripts\\;C:\\Python38\\;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Windows\\System32\\OpenSSH\\;C:\\ProgramData\\chocolatey\\bin;C:\\Program Files\\Git\\cmd;C:\\Program Files (x86)\\Yarn\\bin\\;C:\\jdk-15\\bin;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Program Files\\Amazon\\AWSCLIV2\\;C:\\Program Files (x86)\\Gpg4win\\..\\GnuPG\\bin;C:\\Users\\phpch\\AppData\\Roaming\\Python\\Python38\\site-packages;C:\\Program Files\\Redis\\;C:\\Users\\phpch\\AppData\\Roaming\\npm;C:\\Program Files\\MongoDB\\Server\\4.4\\bin;C:\\Go\\bin;C:\\composer;G:\\xampp7\\php;C:\\Program Files\\PowerShell\\7\\;C:\\Program Files\\nodejs\\;C:\\Program Files\\Docker\\Docker\\resources\\bin;C:\\ProgramData\\DockerDesktop\\version-bin;C:\\Program Files\\Amazon\\ECSCLI;C:\\Users\\phpch\\AppData\\Roaming\\Python\\Python38\\site-packages;C:\\Program Files\\JetBrains\\WebStorm 2020.2.3\\bin;;C:\\xampp\\php;C:\\Python38\\Scripts;C:\\Program Files\\heroku\\bin;C:\\flutter\\bin;C:\\tools\\dart-sdk\\bin;C:\\Users\\phpch\\AppData\\Roaming\\Pub\\Cache\\bin;C:\\Users\\phpch\\AppData\\Local\\Android\\Sdk\\platform-tools;C:\\Users\\phpch\\go\\bin;G:\\wamp64\\bin\\php\\php7.4.9;C:\\Users\\phpch\\AppData\\Roaming\\Composer\\vendor\\bin;G:\\xampp7\\php;C:\\Users\\phpch\\AppData\\Roaming\\npm",
+		"C:\\Users\\phpch\\AppData\\Local\\Temp\\yarn--1611897695983-0.792905216640861;G:\\---WorkFiles\\starter\\react-starter-ts\\node_modules\\.bin;C:\\Users\\phpch\\AppData\\Local\\Yarn\\Data\\link\\node_modules\\.bin;C:\\Users\\phpch\\AppData\\Local\\Yarn\\bin;C:\\Program Files\\libexec\\lib\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Program Files\\lib\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Program Files\\PowerShell\\7;C:\\Python39\\Scripts\\;C:\\Python39\\;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\Python38\\Scripts\\;C:\\Python38\\;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Windows\\System32\\OpenSSH\\;C:\\ProgramData\\chocolatey\\bin;C:\\Program Files\\Git\\cmd;C:\\Program Files (x86)\\Yarn\\bin\\;C:\\jdk-15\\bin;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Program Files\\Amazon\\AWSCLIV2\\;C:\\Program Files (x86)\\Gpg4win\\..\\GnuPG\\bin;C:\\Users\\phpch\\AppData\\Roaming\\Python\\Python38\\site-packages;C:\\Program Files\\Redis\\;C:\\Windows\\system32\\config\\systemprofile\\AppData\\Roaming\\npm;C:\\Program Files\\MongoDB\\Server\\4.4\\bin;C:\\Go\\bin;C:\\composer;G:\\xampp7\\php;C:\\Program Files\\PowerShell\\7\\;C:\\Program Files\\nodejs\\;C:\\Program Files\\Docker\\Docker\\resources\\bin;C:\\ProgramData\\DockerDesktop\\version-bin;C:\\Python39\\Scripts\\;C:\\Python39\\;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\Python38\\Scripts\\;C:\\Python38\\;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Windows\\System32\\OpenSSH\\;C:\\ProgramData\\chocolatey\\bin;C:\\Program Files\\Git\\cmd;C:\\Program Files (x86)\\Yarn\\bin\\;C:\\jdk-15\\bin;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Program Files\\Amazon\\AWSCLIV2\\;C:\\Program Files (x86)\\Gpg4win\\..\\GnuPG\\bin;C:\\Users\\phpch\\AppData\\Roaming\\Python\\Python38\\site-packages;C:\\Program Files\\Redis\\;C:\\Windows\\system32\\config\\systemprofile\\AppData\\Roaming\\npm;C:\\Program Files\\MongoDB\\Server\\4.4\\bin;C:\\Go\\bin;C:\\composer;G:\\xampp7\\php;C:\\Program Files\\PowerShell\\7\\;C:\\Program Files\\nodejs\\;C:\\Program Files\\Docker\\Docker\\resources\\bin;C:\\ProgramData\\DockerDesktop\\version-bin;C:\\Program Files\\Amazon\\ECSCLI;C:\\Users\\phpch\\AppData\\Roaming\\Python\\Python38\\site-packages;C:\\Program Files\\JetBrains\\WebStorm 2020.2.3\\bin;;C:\\xampp\\php;C:\\Python38\\Scripts;C:\\Program Files\\heroku\\bin;C:\\flutter\\bin;C:\\tools\\dart-sdk\\bin;C:\\Users\\phpch\\AppData\\Roaming\\Pub\\Cache\\bin;C:\\Users\\phpch\\AppData\\Local\\Android\\Sdk\\platform-tools;C:\\Users\\phpch\\go\\bin;G:\\wamp64\\bin\\php\\php7.4.9;C:\\Users\\phpch\\AppData\\Roaming\\Composer\\vendor\\bin;G:\\xampp7\\php;C:\\Users\\phpch\\AppData\\Roaming\\npm",
 	PATHEXT: ".COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JSE;.WSF;.WSH;.MSC;.PY;.PYW;.CPL",
 	PhpStorm: "C:\\Program Files\\JetBrains\\PhpStorm 2020.2.1\\bin;",
 	PORT: "3500",

src/App/App.tsx

@@ -1,9 +1,15 @@
 import React, { FC } from "react";
+import Count from "./Components/Count";
+import User from "./Components/User";
 
 const App: FC = () => {
 	return (
 		<div className="App">
-			<h1>React Starter TS</h1>
+			<h1>React Starter TS!</h1>
+			<hr />
+			<Count />
+			<hr />
+			<User />
 		</div>
 	);
 };

src/App/Components/Count.tsx

@@ -0,0 +1,63 @@
+import React, {
+	FC,
+	useState,
+	useEffect,
+	FormEvent,
+	SyntheticEvent,
+	ChangeEvent,
+} from "react";
+
+import { useSelector, useDispatch } from "react-redux";
+import { selectCount, countActions } from "../../store/slices/count.slice";
+
+const Count: FC = () => {
+	const count = useSelector(selectCount);
+
+	const dispatch = useDispatch();
+
+	const handleIncrement = (e: SyntheticEvent) => {
+		e.preventDefault();
+		dispatch(countActions.increment());
+	};
+
+	const handleIncrementByNumber = (e: SyntheticEvent) => {
+		e.preventDefault();
+		dispatch(countActions.incrementByAmount(amount));
+	};
+
+	const handleDecrement = (e: SyntheticEvent) => {
+		e.preventDefault();
+		dispatch(countActions.decrement());
+	};
+
+	const [amount, setAmount] = useState(0);
+
+	const handleInputChange = (num: number) => {
+		setAmount(num);
+	};
+
+	return (
+		<div>
+			<h1>Count Slice</h1>
+			<form action="">
+				<input
+					type="text"
+					name="number"
+					id="number"
+					onChange={(e) =>
+						handleInputChange(parseInt(e.target.value))
+					}
+				/>
+				<button onClick={handleIncrement}>Increase</button>
+				<button onClick={handleDecrement}>Decrement</button>
+				<button onClick={handleIncrementByNumber}>
+					Increment by Number
+				</button>
+			</form>
+			<br />
+			<h3>Count value: {count}</h3>
+		</div>
+	);
+};
+
+export default Count;

src/App/Components/User.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useState } from "react";
+
+import { useSelector, useDispatch } from "react-redux";
+
+import {
+	getUserState,
+	userActions,
+	IUserState,
+	initialUserState,
+} from "../../store/slices/user.slice";
+
+const User: FC = () => {
+	const userObject = useSelector(getUserState);
+
+	const dispatch = useDispatch();
+
+	const [user, setUser] = useState(initialUserState);
+
+	const onUserChange = <P extends keyof IUserState>(
+		prop: P,
+		value: IUserState[P]
+	) => {
+		setUser({ ...user, [prop]: value });
+	};
+
+	const handleSubmit = () => {
+		console.log(user);
+		if (user.username && user.email && user.age)
+			dispatch(userActions.updateUser(user));
+	};
+
+	return (
+		<div>
+			<h1>User Slice</h1>
+			<input
+				type="text"
+				name="username"
+				id="username"
+				placeholder="Username"
+				required
+				onChange={(e) => onUserChange("username", e.target.value)}
+			/>
+			<input
+				type="text"
+				name="email"
+				id="email"
+				placeholder="Email"
+				required
+				onChange={(e) => onUserChange("email", e.target.value)}
+			/>
+			<input
+				type="text"
+				name="age"
+				id="age"
+				placeholder="Age"
+				required
+				onChange={(e) => onUserChange("age", parseInt(e.target.value))}
+			/>
+			<input type="submit" value="Submit" onClick={handleSubmit} />
+			<br />
+			<br />
+			Username: {userObject.username} | Email: {userObject.email} | Age:{" "}
+			{userObject.age}
+			<br />
+			Loading: {userObject.loadingStatus} | Error: {userObject.error}
+		</div>
+	);
+};
+
+export default User;

src/index.tsx

@@ -6,9 +6,14 @@ import App from "./App/App";
 // Optional measuring performance
 // import reportWebVitals from "./reportWebVitals";
 
+import store from "./store/store";
+import { Provider } from "react-redux";
+
 ReactDOM.render(
 	<StrictMode>
-		<App />
+		<Provider store={store}>
+			<App />
+		</Provider>
 	</StrictMode>,
 	document.getElementById("root")
 );

src/store/rootReducers.ts

@@ -0,0 +1,13 @@
+import { combineReducers } from "@reduxjs/toolkit";
+import { countReducer, COUNT_SLICE_KEY } from "./slices/count.slice";
+import { userReducer, USER_SLICE_KEY } from "./slices/user.slice";
+
+const rootReducer = combineReducers({
+	[COUNT_SLICE_KEY]: countReducer,
+	[USER_SLICE_KEY]: userReducer,
+});
+
+// Type for whole reducer object
+export type RootState = ReturnType<typeof rootReducer>;
+
+export default rootReducer;

src/store/slices/count.slice.ts

@@ -0,0 +1,70 @@
+import {
+	createEntityAdapter,
+	createSelector,
+	createSlice,
+	EntityState,
+	PayloadAction,
+} from "@reduxjs/toolkit";
+
+export const COUNT_SLICE_KEY = "count";
+
+export interface ICountEntity {
+	id: number;
+}
+
+export interface ICountState extends EntityState<ICountEntity> {
+	loadingStatus: "not loaded" | "loading" | "loaded" | "error";
+	error: string | null;
+	count: number;
+}
+
+export const countAdapter = createEntityAdapter<ICountEntity>();
+
+export const initialCountState: ICountState = countAdapter.getInitialState({
+	loadingStatus: "not loaded",
+	error: null,
+	count: 0,
+});
+
+export const countSlice = createSlice({
+	name: COUNT_SLICE_KEY,
+	initialState: initialCountState,
+	reducers: {
+		increment: (state) => {
+			state.count += 1;
+			state.loadingStatus = "loaded";
+		},
+		decrement: (state) => {
+			state.count -= 1;
+		},
+		incrementByAmount: (state, { payload }: PayloadAction<number>) => {
+			state.count += payload;
+			state.loadingStatus = "error";
+		},
+		add: countAdapter.addOne,
+		remove: countAdapter.removeOne,
+	},
+});
+
+export const countReducer = countSlice.reducer;
+
+export const countActions = countSlice.actions;
+
+const { selectAll, selectEntities } = countAdapter.getSelectors();
+
+export const getCountState = (state: {
+	[COUNT_SLICE_KEY]: ICountState;
+}): ICountState => {
+	return state[COUNT_SLICE_KEY];
+};
+
+export const selectAllCount = createSelector(getCountState, selectAll);
+
+export const selectCountEntities = createSelector(
+	getCountState,
+	selectEntities
+);
+
+export const selectCount = (state: {
+	[COUNT_SLICE_KEY]: ICountState;
+}): number => state[COUNT_SLICE_KEY].count;