[
{
"path": "react-rtk-demo/.gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
},
{
"path": "react-rtk-demo/index.html",
"content": "\n\n \n \n \n \n Vite App\n \n \n \n \n \n\n"
},
{
"path": "react-rtk-demo/package.json",
"content": "{\n \"name\": \"react-rtk-demo\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@reduxjs/toolkit\": \"^1.7.2\",\n \"axios\": \"^0.26.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-redux\": \"^7.2.6\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-react\": \"^1.0.7\",\n \"vite\": \"^2.8.0\"\n }\n}\n"
},
{
"path": "react-rtk-demo/src/App.css",
"content": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\nbutton {\n font-size: calc(10px + 2vmin);\n}\n"
},
{
"path": "react-rtk-demo/src/App.jsx",
"content": "import './App.css'\nimport { CakeView } from './features/cake/CakeView'\nimport { IcecreamView } from './features/icecream/IcecreamView'\nimport { UserView } from './features/user/UserView'\n\nfunction App() {\n return (\n \n \n \n \n
\n )\n}\n\nexport default App\n"
},
{
"path": "react-rtk-demo/src/app/store.js",
"content": "import { configureStore } from '@reduxjs/toolkit'\nimport cakeReducer from '../features/cake/cakeSlice'\nimport icecreamReducer from '../features/icecream/icecreamSlice'\nimport userReducer from '../features/user/userSlice'\n\nconst store = configureStore({\n reducer: {\n cake: cakeReducer,\n icecream: icecreamReducer,\n user: userReducer\n }\n})\n\nexport default store\n"
},
{
"path": "react-rtk-demo/src/features/cake/CakeView.jsx",
"content": "import React from 'react'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { ordered, restocked } from './cakeSlice'\n\nexport const CakeView = () => {\n const numOfCakes = useSelector(state => state.cake.numOfCakes)\n const dispatch = useDispatch()\n return (\n \n
Number of cakes - {numOfCakes}
\n \n \n \n )\n}\n"
},
{
"path": "react-rtk-demo/src/features/cake/cakeSlice.js",
"content": "import { createSlice } from '@reduxjs/toolkit'\n\nconst initialState = {\n numOfCakes: 20\n}\n\nconst cakeSlice = createSlice({\n name: 'cake',\n initialState,\n reducers: {\n ordered: state => {\n state.numOfCakes--\n },\n restocked: (state, action) => {\n state.numOfCakes += action.payload\n }\n }\n})\n\nexport default cakeSlice.reducer\nexport const { ordered, restocked } = cakeSlice.actions\n"
},
{
"path": "react-rtk-demo/src/features/icecream/IcecreamView.jsx",
"content": "import React from 'react'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { ordered, restocked } from './icecreamSlice'\n\nexport const IcecreamView = () => {\n const [value, setValue] = React.useState(1)\n const numOfIcecreams = useSelector(state => state.icecream.numOfIcecreams)\n const dispatch = useDispatch()\n return (\n \n
Number of ice creams - {numOfIcecreams}
\n \n setValue(parseInt(e.target.value))}\n />\n \n \n )\n}\n"
},
{
"path": "react-rtk-demo/src/features/icecream/icecreamSlice.js",
"content": "import { createSlice } from '@reduxjs/toolkit'\nimport { ordered as cakeOrdered } from '../cake/cakeSlice'\n\nconst initialState = {\n numOfIcecreams: 10\n}\n\nconst icecreamSlice = createSlice({\n name: 'icecream',\n initialState,\n reducers: {\n ordered: state => {\n state.numOfIcecreams--\n },\n restocked: (state, action) => {\n state.numOfIcecreams += action.payload\n }\n },\n extraReducers: builder => {\n builder.addCase(cakeOrdered, state => {\n state.numOfIcecreams--\n })\n }\n})\n\nexport default icecreamSlice.reducer\nexport const { ordered, restocked } = icecreamSlice.actions\n"
},
{
"path": "react-rtk-demo/src/features/user/UserView.jsx",
"content": "import React, { useEffect } from 'react'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { fetchUsers } from './userSlice'\n\nexport const UserView = () => {\n const user = useSelector(state => state.user)\n const dispatch = useDispatch()\n useEffect(() => {\n dispatch(fetchUsers())\n }, [])\n return (\n \n
List of Users
\n {user.loading &&
Loading...
}\n {!user.loading && user.error ?
Error: {user.error}
: null}\n {!user.loading && user.users.length ? (\n
\n {user.users.map(user => (\n - {user.name}
\n ))}\n
\n ) : null}\n
\n \n \n \n
\n )\n}\n\nexport default App\n"
},
{
"path": "react-rtk-ts-demo/src/app/hooks.ts",
"content": "import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'\nimport type { RootState, AppDispatch } from './store'\n\n// Use throughout your app instead of plain `useDispatch` and `useSelector`\nexport const useAppDispatch = () => useDispatch()\nexport const useAppSelector: TypedUseSelectorHook = useSelector\n"
},
{
"path": "react-rtk-ts-demo/src/app/store.ts",
"content": "import { configureStore } from '@reduxjs/toolkit'\nimport cakeReducer from '../features/cake/cakeSlice'\nimport icecreamReducer from '../features/icecream/icecreamSlice'\nimport userReducer from '../features/user/userSlice'\n\nconst store = configureStore({\n reducer: {\n cake: cakeReducer,\n icecream: icecreamReducer,\n user: userReducer\n }\n})\n\nexport default store\n// Infer the `RootState` and `AppDispatch` types from the store itself\nexport type RootState = ReturnType\n// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}\nexport type AppDispatch = typeof store.dispatch\n"
},
{
"path": "react-rtk-ts-demo/src/features/cake/CakeView.tsx",
"content": "import { useAppSelector, useAppDispatch } from '../../app/hooks'\nimport { ordered, restocked } from './cakeSlice'\n\nexport const CakeView = () => {\n const numOfCakes = useAppSelector(state => state.cake.numOfCakes)\n const dispatch = useAppDispatch()\n return (\n \n
Number of cakes - {numOfCakes}
\n \n \n \n )\n}\n"
},
{
"path": "react-rtk-ts-demo/src/features/cake/cakeSlice.ts",
"content": "import { createSlice, PayloadAction } from '@reduxjs/toolkit'\n\ntype InitialState = {\n numOfCakes: number\n}\nconst initialState: InitialState = {\n numOfCakes: 20\n}\n\nconst cakeSlice = createSlice({\n name: 'cake',\n initialState,\n reducers: {\n ordered: state => {\n state.numOfCakes--\n },\n restocked: (state, action: PayloadAction) => {\n state.numOfCakes += action.payload\n }\n }\n})\n\nexport default cakeSlice.reducer\nexport const { ordered, restocked } = cakeSlice.actions\n"
},
{
"path": "react-rtk-ts-demo/src/features/icecream/IcecreamView.tsx",
"content": "import React from 'react'\nimport { useAppSelector, useAppDispatch } from '../../app/hooks'\nimport { ordered, restocked } from './icecreamSlice'\n\nexport const IcecreamView = () => {\n const [value, setValue] = React.useState(1)\n const numOfIcecreams = useAppSelector(state => state.icecream.numOfIcecreams)\n const dispatch = useAppDispatch()\n return (\n \n
Number of ice creams - {numOfIcecreams}
\n \n setValue(parseInt(e.target.value))}\n />\n \n \n )\n}\n"
},
{
"path": "react-rtk-ts-demo/src/features/icecream/icecreamSlice.ts",
"content": "import { createSlice, PayloadAction } from '@reduxjs/toolkit'\nimport { ordered as cakeOrdered } from '../cake/cakeSlice'\n\ntype InitialState = {\n numOfIcecreams: number\n}\n\nconst initialState: InitialState = {\n numOfIcecreams: 10\n}\n\nconst icecreamSlice = createSlice({\n name: 'icecream',\n initialState,\n reducers: {\n ordered: state => {\n state.numOfIcecreams--\n },\n restocked: (state, action: PayloadAction) => {\n state.numOfIcecreams += action.payload\n }\n },\n extraReducers: builder => {\n builder.addCase(cakeOrdered, state => {\n state.numOfIcecreams--\n })\n }\n})\n\nexport default icecreamSlice.reducer\nexport const { ordered, restocked } = icecreamSlice.actions\n"
},
{
"path": "react-rtk-ts-demo/src/features/user/UserView.tsx",
"content": "import { useEffect } from 'react'\nimport { useAppSelector, useAppDispatch } from '../../app/hooks'\nimport { fetchUsers } from './userSlice'\n\nexport const UserView = () => {\n const user = useAppSelector(state => state.user)\n const dispatch = useAppDispatch()\n useEffect(() => {\n dispatch(fetchUsers())\n }, [])\n return (\n \n
List of Users
\n {user.loading &&
Loading...
}\n {!user.loading && user.error ?
Error: {user.error}
: null}\n {!user.loading && user.users.length ? (\n
\n {user.users.map(user => (\n - {user.name}
\n ))}\n
\n ) : null}\n