Skip to content

Commit 9d54a2a

Browse files
afiiifafiiif
committedSep 6, 2022
feat: add redux snippets
·
v1.18.1v1.11.0
1 parent 35fac6b commit 9d54a2a

File tree

6 files changed

+279
-0
lines changed

6 files changed

+279
-0
lines changed
 

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
All notable changes to the "vscode-js-ts-react-nextjs-snippets" extension will be documented in this file.
44

5+
## 1.11.0 <small>- 2022/09/06</small>
6+
7+
- Added Redux snippet (`rxDispatch`, `rxStore`, `rxSlice`)
8+
59
## 1.10.0 <small>- 2022/07/19</small>
610

711
- Added React with Emotion CSS snippet (`emoRFC`, `emoRFCe`, `emoRAFC`, `emoRAFCe`)

‎snippets/javascript.json

+77
Original file line numberDiff line numberDiff line change
@@ -927,6 +927,83 @@
927927
"description": "Zustand useStore with shallow",
928928
"scope": "javascript,javascriptreact"
929929
},
930+
"🟨 rxUseDispatch": {
931+
"prefix": "rxDispatch.$rxDispatch.useDispatch",
932+
"body": [
933+
"const dispatch = useDispatch$1()",
934+
""
935+
],
936+
"description": "Redux useDispatch",
937+
"scope": "javascript,javascriptreact"
938+
},
939+
"🟨 rxConfigStore": {
940+
"prefix": "rxStore.$rxStore.configureStore",
941+
"body": [
942+
"import { configureStore } from '@reduxjs/toolkit'",
943+
"",
944+
"const ${1:store} = configureStore({",
945+
"\treducer: {",
946+
"\t\t$2",
947+
"\t},",
948+
"})",
949+
"",
950+
"export default $1"
951+
],
952+
"description": "Redux configureStore",
953+
"scope": "javascript,javascriptreact"
954+
},
955+
"🟨 rxCreateSlice": {
956+
"prefix": "rxSlice.$rxSlice.createSlice",
957+
"body": [
958+
"const initialState = {",
959+
"\t${2:value: 0,}",
960+
"}",
961+
"",
962+
"export const ${1:counter}Slice = createSlice({",
963+
"\tname: '$1',",
964+
"\tinitialState,",
965+
"\treducers: {",
966+
"\t\t$3",
967+
"\t},",
968+
"})",
969+
"",
970+
"export const { $0 } = $1Slice.actions",
971+
"",
972+
"export default $1Slice.reducer"
973+
],
974+
"description": "Redux createSlice",
975+
"scope": "javascript,javascriptreact"
976+
},
977+
"🟨 rxCreateSliceWithExample": {
978+
"prefix": "rxSlice.$rxSlice.createSliceWithExample",
979+
"body": [
980+
"const initialState = {",
981+
"\t${2:value: 0,}",
982+
"}",
983+
"",
984+
"export const ${1:counter}Slice = createSlice({",
985+
"\tname: '$1',",
986+
"\tinitialState,",
987+
"\treducers: {",
988+
"\t\t$3increment: (state) => {",
989+
"\t\t\tstate.value += 1",
990+
"\t\t},",
991+
"\t\tdecrement: (state) => {",
992+
"\t\t\tstate.value -= 1",
993+
"\t\t},",
994+
"\t\tincrementByAmount: (state, action) => {",
995+
"\t\t\tstate.value += action.payload",
996+
"\t\t},",
997+
"\t},",
998+
"})",
999+
"",
1000+
"export const { increment, decrement, incrementByAmount } = $1Slice.actions",
1001+
"",
1002+
"export default $1Slice.reducer"
1003+
],
1004+
"description": "Redux createSlice (with example)",
1005+
"scope": "javascript,javascriptreact"
1006+
},
9301007
"🟨 reactFnCompEmotion": {
9311008
"prefix": "emoRFC.$emoRFC",
9321009
"body": [

‎snippets/typescript.json

+97
Original file line numberDiff line numberDiff line change
@@ -1224,6 +1224,103 @@
12241224
"description": "Zustand useStore with shallow",
12251225
"scope": "javascript,typescript,javascriptreact,typescriptreact"
12261226
},
1227+
"🟨 rxUseDispatch": {
1228+
"prefix": "rxDispatch.$rxDispatch.useDispatch",
1229+
"body": [
1230+
"const dispatch = useDispatch$1()",
1231+
""
1232+
],
1233+
"description": "Redux useDispatch",
1234+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1235+
},
1236+
"🟨 rxConfigStore": {
1237+
"prefix": "rxStore.$rxStore.configureStore",
1238+
"body": [
1239+
"import { configureStore } from '@reduxjs/toolkit'",
1240+
"",
1241+
"const ${1:store} = configureStore({",
1242+
"\treducer: {",
1243+
"\t\t$2",
1244+
"\t},",
1245+
"})",
1246+
"",
1247+
"export default $1"
1248+
],
1249+
"description": "Redux configureStore",
1250+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1251+
},
1252+
"🟨 rxCreateSlice": {
1253+
"prefix": "rxSlice.$rxSlice.createSlice",
1254+
"body": [
1255+
"const initialState = {",
1256+
"\t${2:value: 0,}",
1257+
"}",
1258+
"",
1259+
"export const ${1:counter}Slice = createSlice({",
1260+
"\tname: '$1',",
1261+
"\tinitialState,",
1262+
"\treducers: {",
1263+
"\t\t$3",
1264+
"\t},",
1265+
"})",
1266+
"",
1267+
"export const { $0 } = $1Slice.actions",
1268+
"",
1269+
"export default $1Slice.reducer"
1270+
],
1271+
"description": "Redux createSlice",
1272+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1273+
},
1274+
"🟨 rxCreateSliceWithExample": {
1275+
"prefix": "rxSlice.$rxSlice.createSliceWithExample",
1276+
"body": [
1277+
"const initialState = {",
1278+
"\t${2:value: 0,}",
1279+
"}",
1280+
"",
1281+
"export const ${1:counter}Slice = createSlice({",
1282+
"\tname: '$1',",
1283+
"\tinitialState,",
1284+
"\treducers: {",
1285+
"\t\t$3increment: (state) => {",
1286+
"\t\t\tstate.value += 1",
1287+
"\t\t},",
1288+
"\t\tdecrement: (state) => {",
1289+
"\t\t\tstate.value -= 1",
1290+
"\t\t},",
1291+
"\t\tincrementByAmount: (state, action) => {",
1292+
"\t\t\tstate.value += action.payload",
1293+
"\t\t},",
1294+
"\t},",
1295+
"})",
1296+
"",
1297+
"export const { increment, decrement, incrementByAmount } = $1Slice.actions",
1298+
"",
1299+
"export default $1Slice.reducer"
1300+
],
1301+
"description": "Redux createSlice (with example)",
1302+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1303+
},
1304+
"🟦 TS RxConfigStore": {
1305+
"prefix": "rxStore.TS.$$rxStore.configureStore",
1306+
"body": [
1307+
"import { configureStore } from '@reduxjs/toolkit'",
1308+
"",
1309+
"const ${1:store} = configureStore({",
1310+
"\treducer: {",
1311+
"\t\t$2",
1312+
"\t},",
1313+
"})",
1314+
"",
1315+
"export default $1",
1316+
"",
1317+
"export type RootState = ReturnType<typeof $1.getState>",
1318+
"",
1319+
"export type AppDispatch = typeof $1.dispatch"
1320+
],
1321+
"description": "Redux configure store",
1322+
"scope": "javascript,typescript,javascriptreact,typescriptreact"
1323+
},
12271324
"🟨 reactFnCompEmotion": {
12281325
"prefix": "emoRFC.$emoRFC",
12291326
"body": [

‎src/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ const reactQuery = normalizeSnippets(require('./snippets/react-query'));
1717
const swr = normalizeSnippets(require('./snippets/swr'));
1818
const reactHookForm = normalizeSnippets(require('./snippets/react-hook-form'));
1919
const zustand = normalizeSnippets(require('./snippets/zustand'));
20+
const redux = normalizeSnippets(require('./snippets/redux'));
21+
const reduxTS = normalizeSnippets(require('./snippets/redux-ts'), true);
2022
const emotion = normalizeSnippets(require('./snippets/emotion'));
2123

2224
const testing = normalizeSnippets(require('./snippets/testing'));
@@ -41,6 +43,7 @@ const javascriptSnippets = {
4143
...swr,
4244
...reactHookForm,
4345
...zustand,
46+
...redux,
4447
...emotion,
4548
...testing,
4649
...wrapper,
@@ -61,6 +64,8 @@ const typescriptSnippets = {
6164
...swr,
6265
...reactHookForm,
6366
...zustand,
67+
...redux,
68+
...reduxTS,
6469
...emotion,
6570
...testing,
6671
...wrapper,

‎src/snippets/redux-ts.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Snippet } from '../types';
2+
3+
export const tsRxConfigStore: Snippet = {
4+
prefix: ['rxStore', 'configureStore'],
5+
body: [
6+
"import { configureStore } from '@reduxjs/toolkit'",
7+
'',
8+
'const ${1:store} = configureStore({',
9+
'\treducer: {',
10+
'\t\t$2',
11+
'\t},',
12+
'})',
13+
'',
14+
'export default $1',
15+
'',
16+
'export type RootState = ReturnType<typeof $1.getState>',
17+
'',
18+
'export type AppDispatch = typeof $1.dispatch',
19+
],
20+
description: 'Redux configure store',
21+
};

‎src/snippets/redux.ts

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Snippet } from '../types';
2+
3+
export const rxUseDispatch: Snippet = {
4+
prefix: ['rxDispatch', 'useDispatch'],
5+
body: ['const dispatch = useDispatch$1()', ''],
6+
description: 'Redux useDispatch',
7+
};
8+
9+
export const rxConfigStore: Snippet = {
10+
prefix: ['rxStore', 'configureStore'],
11+
body: [
12+
"import { configureStore } from '@reduxjs/toolkit'",
13+
'',
14+
'const ${1:store} = configureStore({',
15+
'\treducer: {',
16+
'\t\t$2',
17+
'\t},',
18+
'})',
19+
'',
20+
'export default $1',
21+
],
22+
description: 'Redux configureStore',
23+
};
24+
25+
export const rxCreateSlice: Snippet = {
26+
prefix: ['rxSlice', 'createSlice'],
27+
body: [
28+
'const initialState = {',
29+
'\t${2:value: 0,}',
30+
'}',
31+
'',
32+
'export const ${1:counter}Slice = createSlice({',
33+
"\tname: '$1',",
34+
'\tinitialState,',
35+
'\treducers: {',
36+
'\t\t$3',
37+
'\t},',
38+
'})',
39+
'',
40+
'export const { $0 } = $1Slice.actions',
41+
'',
42+
'export default $1Slice.reducer',
43+
],
44+
description: 'Redux createSlice',
45+
};
46+
47+
export const rxCreateSliceWithExample: Snippet = {
48+
prefix: ['rxSlice', 'createSliceWithExample'],
49+
body: [
50+
'const initialState = {',
51+
'\t${2:value: 0,}',
52+
'}',
53+
'',
54+
'export const ${1:counter}Slice = createSlice({',
55+
"\tname: '$1',",
56+
'\tinitialState,',
57+
'\treducers: {',
58+
'\t\t$3increment: (state) => {',
59+
'\t\t\tstate.value += 1',
60+
'\t\t},',
61+
'\t\tdecrement: (state) => {',
62+
'\t\t\tstate.value -= 1',
63+
'\t\t},',
64+
'\t\tincrementByAmount: (state, action) => {',
65+
'\t\t\tstate.value += action.payload',
66+
'\t\t},',
67+
'\t},',
68+
'})',
69+
'',
70+
'export const { increment, decrement, incrementByAmount } = $1Slice.actions',
71+
'',
72+
'export default $1Slice.reducer',
73+
],
74+
description: 'Redux createSlice (with example)',
75+
};

0 commit comments

Comments
 (0)
Please sign in to comment.