feat: update example with typescript

examples/with-redux-toolkit/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.css'

examples/with-redux-toolkit/package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "type-check": "tsc"
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.5.0",
@@ -13,5 +14,13 @@
     "react-dom": "17.0.1",
     "react-redux": "7.2.2"
   },
+  "devDependencies": {
+    "@types/node": "14.14.35",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.2",
+    "@types/react-redux": "7.1.16",
+    "prettier": "2.2.1",
+    "typescript": "4.2.3"
+  },
   "license": "MIT"
 }

examples/with-redux-toolkit/src/app/store.ts

@@ -0,0 +1,12 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import counterReducer from '../features/counter/counterSlice'
+
+const rootReducer = combineReducers({
+  counter: counterReducer,
+})
+
+export type CoreState = ReturnType<typeof rootReducer>
+
+export const store = configureStore({
+  reducer: rootReducer,
+})

examples/with-redux-toolkit/src/features/counter/counterSlice.js → examples/with-redux-toolkit/src/features/counter/counterSlice.ts

@@ -1,6 +1,11 @@
-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice, Dispatch } from '@reduxjs/toolkit'
+import { CoreState } from '../../app/store'
 
-const initialState = {
+type CounterState = {
+  value: number
+}
+
+const initialState: CounterState = {
   value: 0,
 }
 
@@ -31,7 +36,7 @@ export const { increment, decrement, incrementByAmount } = counterSlice.actions
 // can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
 // will call the thunk with the `dispatch` function as the first argument. Async
 // code can then be executed and other actions can be dispatched
-export const incrementAsync = (amount) => (dispatch) => {
+export const incrementAsync = (amount: number) => (dispatch: Dispatch) => {
   setTimeout(() => {
     dispatch(incrementByAmount(amount))
   }, 1000)
@@ -40,6 +45,6 @@ export const incrementAsync = (amount) => (dispatch) => {
 // The function below is called a selector and allows us to select a value from
 // the state. Selectors can also be defined inline where they're used instead of
 // in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
-export const selectCount = (state) => state.counter.value
+export const selectCount = (state: CoreState) => state.counter.value
 
 export default counterSlice.reducer

examples/with-redux-toolkit/src/pages/_app.tsx

@@ -0,0 +1,20 @@
+import { ComponentType, FC } from 'react'
+import { Provider } from 'react-redux'
+import { AppInitialProps } from 'next/app'
+import { store } from '../app/store'
+import '../styles/globals.css'
+
+type AppProps = {
+  Component: ComponentType<AppInitialProps>
+  pageProps: AppInitialProps
+}
+
+const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
+  return (
+    <Provider store={store}>
+      <Component {...pageProps} />
+    </Provider>
+  )
+}
+
+export default MyApp

examples/with-redux-toolkit/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "es2017"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx"]
+}