feat(redux-toolkit init): initialised redux-toolkit and created PoC

.eslintrc.json

@@ -65,7 +65,9 @@
           "**/jest.setup.ts", // jest setup
           "**/setupTests.ts"
         ],
-        "optionalDependencies": false
+        "optionalDependencies": false,
+        "peerDependencies": false,
+        "packageDir": "./"
       }
     ],
     "indent": ["error", 2],
@@ -83,6 +85,12 @@
       "rules": {
         "@typescript-eslint/explicit-function-return-type": "error"
       }
+    },
+    {
+      // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.ts'
+      "files": ["src/**/*.slice.ts", "src/**/*.reducers.ts"],
+      // avoid state param assignment
+      "rules": { "no-param-reassign": ["error", { "props": false }] }
     }
   ],
   "settings": {

package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@next/font": "^13.5.2",
+    "@reduxjs/toolkit": "^1.9.6",
     "@types/node": "20.6.2",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -37,6 +38,7 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-redux": "^8.1.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3"
   },
@@ -45,6 +47,8 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react-redux": "^7.1.26",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "cypress": "^13.2.0",

pages/_app.tsx

+import { AppWrapper } from '@/components/AppWrapper';
+import type { AppProps } from 'next/app';
+
+const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
+  <AppWrapper>
+    <Component {...pageProps} />
+  </AppWrapper>
+);
+
+export default MyApp;

pages/redux.tsx

+import { useDispatch, useSelector } from 'react-redux';
+import { selectSearchValue } from '@/redux/search/search.selectors';
+import { setSearchValue } from '@/redux/search/search.slice';
+
+const ReduxPage = (): JSX.Element => {
+  const dispatch = useDispatch();
+  const searchValue = useSelector(selectSearchValue);
+
+  const triggerSyncUpdate = (): void => {
+    // eslint-disable-next-line prefer-template
+    const newValue = searchValue + 'test';
+    dispatch(setSearchValue(newValue));
+  };
+
+  return (
+    <div>
+      {searchValue}
+      <button type="button" onClick={triggerSyncUpdate}>
+        sync update
+      </button>
+    </div>
+  );
+};
+
+export default ReduxPage;

src/components/AppWrapper/AppWrapper.component.tsx

+import { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { store } from '@/redux/store';
+
+interface AppWrapperProps {
+  children: ReactNode;
+}
+
+export const AppWrapper = ({ children }: AppWrapperProps): JSX.Element => (
+  <Provider store={store}>{children}</Provider>
+);

src/components/AppWrapper/index.ts

+export { AppWrapper } from './AppWrapper.component';

src/redux/hooks/useAppDispatch.ts

+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '@/redux/store';
+
+export const useAppDispatch: () => AppDispatch = useDispatch;

src/redux/hooks/useAppSelector.ts

+import { useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import { RootState } from '@/redux/store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/redux/search/search.reducers.ts

+// updating state
+import { SearchState } from '@/redux/search/search.types';
+import { PayloadAction } from '@reduxjs/toolkit';
+
+export const setSearchValueReducer = (state: SearchState, action: PayloadAction<string>): void => {
+  state.searchValue = action.payload;
+};

src/redux/search/search.selectors.ts

+import type { RootState } from '@/redux/store';
+
+// THIS IS EXAMPLE, it's not memoised!!!! Check redux-tookit docs.
+export const selectSearchValue = (state: RootState): string => state.search.searchValue;

src/redux/search/search.slice.ts

+import { createSlice } from '@reduxjs/toolkit';
+import { SearchState } from '@/redux/search/search.types';
+import { setSearchValueReducer } from '@/redux/search/search.reducers';
+
+const initialState: SearchState = {
+  searchValue: '',
+  searchResult: {
+    content: '',
+    drugs: '',
+  },
+};
+
+export const searchSlice = createSlice({
+  name: 'search',
+  initialState,
+  reducers: {
+    setSearchValue: setSearchValueReducer,
+  },
+});
+
+export const { setSearchValue } = searchSlice.actions;
+
+export default searchSlice.reducer;

src/redux/search/search.types.ts

+export interface SearchResult {
+  content: string;
+  drugs: string;
+}
+
+export interface SearchState {
+  searchValue: string;
+  searchResult: SearchResult;
+}

src/redux/store.ts

+import { configureStore } from '@reduxjs/toolkit';
+import searchReducer from './search/search.slice';
+
+export const store = configureStore({
+  reducer: {
+    search: searchReducer,
+  },
+  devTools: true,
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;