From bb42e6253b5d0336efa1751512caca36b77f37b2 Mon Sep 17 00:00:00 2001 From: albert Date: Wed, 4 Mar 2020 02:35:53 +0530 Subject: [PATCH 1/5] Added: thunk example --- package.json | 3 +- template.json | 3 +- template/src/features/counter/Counter.js | 33 +++++++++++++-- .../src/features/counter/Counter.module.css | 1 + template/src/features/counter/counterSlice.js | 41 +++++++++++++++++-- template/src/store.js | 8 ++-- 6 files changed, 76 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 0e2ddb1..2d53ed8 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "react-dom": "^16.12.0", "react-redux": "^7.1.3", "react-test-renderer": "^16.12.0", - "redux": "^4.0.4" + "redux": "^4.0.4", + "redux-thunk": "^2.3.0" } } diff --git a/template.json b/template.json index 6e0cdea..4758fbb 100644 --- a/template.json +++ b/template.json @@ -4,6 +4,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", - "react-redux": "^7.1.3" + "react-redux": "^7.1.3", + "redux-thunk": "^2.3.0" } } diff --git a/template/src/features/counter/Counter.js b/template/src/features/counter/Counter.js index 7657659..b49f29e 100644 --- a/template/src/features/counter/Counter.js +++ b/template/src/features/counter/Counter.js @@ -1,17 +1,21 @@ -import React, { useState } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; import { decrement, increment, incrementByAmount, selectCount, -} from './counterSlice'; -import styles from './Counter.module.css'; + isLoading, + incrementByAmountAsync +} from "./counterSlice"; +import styles from "./Counter.module.css"; export function Counter() { const count = useSelector(selectCount); + const loading = useSelector(isLoading); const dispatch = useDispatch(); const [incrementAmount, setIncrementAmount] = useState(2); + const [incrementAmountAsync, setIncrementAmountAsync] = useState(2); return (
@@ -50,6 +54,27 @@ export function Counter() { Add Amount
+
+ setIncrementAmountAsync(e.target.value)} + /> + +
); } diff --git a/template/src/features/counter/Counter.module.css b/template/src/features/counter/Counter.module.css index 6d50e9c..16a4f72 100644 --- a/template/src/features/counter/Counter.module.css +++ b/template/src/features/counter/Counter.module.css @@ -2,6 +2,7 @@ display: flex; align-items: center; justify-content: center; + margin-bottom: 10px; } .row:first-child { diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index bed9e5c..7e7bfd2 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -1,9 +1,11 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; export const slice = createSlice({ - name: 'counter', + name: "counter", initialState: { value: 0, + isLoading: false, + err: "", }, reducers: { increment: state => { @@ -19,10 +21,41 @@ export const slice = createSlice({ incrementByAmount: (state, action) => { state.value += action.payload.amount; }, - }, + incrementByAmountAsyncRequest: state => { + state.isLoading = true; + }, + incrementByAmountAsyncSuccess: (state, action) => { + state.value += action.payload.amount; + state.isLoading = false; + }, + incrementByAmountAsyncFailure: (state, action) => { + state.isLoading = false; + state.err = action.payload; + } + } }); export const selectCount = state => state.counter.value; -export const { increment, decrement, incrementByAmount } = slice.actions; +export const isLoading = state => state.counter.isLoading; + +export const { + increment, + decrement, + incrementByAmount, + incrementByAmountAsyncRequest, + incrementByAmountAsyncSuccess, + incrementByAmountAsyncFailure +} = slice.actions; export default slice.reducer; + +export const incrementByAmountAsync = payload => async dispatch => { + dispatch(incrementByAmountAsyncRequest()); + try { + await new Promise(resolve => setTimeout(resolve, 2000)); + } catch (err) { + dispatch(incrementByAmountAsyncFailure(err.toString())); + return; + } + dispatch(incrementByAmountAsyncSuccess(payload)); +}; diff --git a/template/src/store.js b/template/src/store.js index 5c53cd3..cf33ee2 100644 --- a/template/src/store.js +++ b/template/src/store.js @@ -1,8 +1,10 @@ -import { configureStore } from '@reduxjs/toolkit'; -import counterReducer from './features/counter/counterSlice'; +import { configureStore } from "@reduxjs/toolkit"; +import counterReducer from "./features/counter/counterSlice"; +import thunk from "redux-thunk"; export default configureStore({ reducer: { - counter: counterReducer, + counter: counterReducer }, + middleware: [thunk] }); From 10edc757501791de45d2202c1cea863fe1092020 Mon Sep 17 00:00:00 2001 From: albert Date: Wed, 4 Mar 2020 02:44:19 +0530 Subject: [PATCH 2/5] Fix: single quotes --- template/src/features/counter/Counter.js | 8 ++++---- template/src/features/counter/counterSlice.js | 6 +++--- template/src/store.js | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/template/src/features/counter/Counter.js b/template/src/features/counter/Counter.js index b49f29e..8bdbadc 100644 --- a/template/src/features/counter/Counter.js +++ b/template/src/features/counter/Counter.js @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; +import React, { useState } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; import { decrement, increment, @@ -7,8 +7,8 @@ import { selectCount, isLoading, incrementByAmountAsync -} from "./counterSlice"; -import styles from "./Counter.module.css"; +} from './counterSlice'; +import styles from './Counter.module.css'; export function Counter() { const count = useSelector(selectCount); diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index 7e7bfd2..2387396 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -1,11 +1,11 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice } from '@reduxjs/toolkit'; export const slice = createSlice({ - name: "counter", + name: 'counter', initialState: { value: 0, isLoading: false, - err: "", + err: '', }, reducers: { increment: state => { diff --git a/template/src/store.js b/template/src/store.js index cf33ee2..21e879c 100644 --- a/template/src/store.js +++ b/template/src/store.js @@ -1,6 +1,6 @@ -import { configureStore } from "@reduxjs/toolkit"; -import counterReducer from "./features/counter/counterSlice"; -import thunk from "redux-thunk"; +import { configureStore } from '@reduxjs/toolkit'; +import counterReducer from './features/counter/counterSlice'; +import thunk from 'redux-thunk'; export default configureStore({ reducer: { From 7d2e04600ca7a14556d3e011455c4889fe7a5cc2 Mon Sep 17 00:00:00 2001 From: albert Date: Wed, 4 Mar 2020 02:47:21 +0530 Subject: [PATCH 3/5] Fix: trailing commas --- template/src/store.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/template/src/store.js b/template/src/store.js index 21e879c..941727e 100644 --- a/template/src/store.js +++ b/template/src/store.js @@ -4,7 +4,7 @@ import thunk from 'redux-thunk'; export default configureStore({ reducer: { - counter: counterReducer + counter: counterReducer, }, - middleware: [thunk] + middleware: [thunk], }); From d9aac8c22c5675a0b40298ed4be2af5869b36414 Mon Sep 17 00:00:00 2001 From: albert Date: Wed, 4 Mar 2020 02:52:17 +0530 Subject: [PATCH 4/5] Fix: error var reset --- template/src/features/counter/counterSlice.js | 1 + 1 file changed, 1 insertion(+) diff --git a/template/src/features/counter/counterSlice.js b/template/src/features/counter/counterSlice.js index 2387396..4a08ca6 100644 --- a/template/src/features/counter/counterSlice.js +++ b/template/src/features/counter/counterSlice.js @@ -23,6 +23,7 @@ export const slice = createSlice({ }, incrementByAmountAsyncRequest: state => { state.isLoading = true; + state.err = '' }, incrementByAmountAsyncSuccess: (state, action) => { state.value += action.payload.amount; From 4eab692ecb9ff64ae76681f0734155c8105568f4 Mon Sep 17 00:00:00 2001 From: albert Date: Wed, 4 Mar 2020 06:47:58 +0530 Subject: [PATCH 5/5] Fix: thunk import --- package.json | 3 +-- template.json | 3 +-- template/src/store.js | 5 ++--- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 2d53ed8..0e2ddb1 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,6 @@ "react-dom": "^16.12.0", "react-redux": "^7.1.3", "react-test-renderer": "^16.12.0", - "redux": "^4.0.4", - "redux-thunk": "^2.3.0" + "redux": "^4.0.4" } } diff --git a/template.json b/template.json index 4758fbb..6e0cdea 100644 --- a/template.json +++ b/template.json @@ -4,7 +4,6 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", - "react-redux": "^7.1.3", - "redux-thunk": "^2.3.0" + "react-redux": "^7.1.3" } } diff --git a/template/src/store.js b/template/src/store.js index 941727e..e7ddefd 100644 --- a/template/src/store.js +++ b/template/src/store.js @@ -1,10 +1,9 @@ -import { configureStore } from '@reduxjs/toolkit'; +import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; import counterReducer from './features/counter/counterSlice'; -import thunk from 'redux-thunk'; export default configureStore({ reducer: { counter: counterReducer, }, - middleware: [thunk], + middleware: [ ...getDefaultMiddleware() ], });