feat: add custom useSelector and dispatch

src/entities/Counter/model/selectors/getCounterValue/getCounterValue.ts

@@ -7,3 +7,9 @@ export const getCounterValue = createSelector(
     getCounter,
     (counter: CounterSchema) => counter.value,
 );
+
+// using custom select
+
+// export const [useCounterValue, getCounterValue] = buildSelector(
+//     (state) => state.counter.value,
+// );

src/entities/Counter/model/slice/counterSlice.ts

@@ -21,3 +21,27 @@ export const counterSlice = createSlice({
 // Action creators are generated for each case reducer function
 export const { actions: counterActions } = counterSlice;
 export const { reducer: counterReducer } = counterSlice;
+
+// using custom slice
+
+// export const counterSlice = buildSlice({
+//     name: 'counter',
+//     initialState,
+//     reducers: {
+//         increment: (state) => {
+//             state.value += 1;
+//         },
+//         add: (state, { payload }: PayloadAction<number>) => {
+//             state.value += payload;
+//         },
+//         decrement: (state) => {
+//             state.value -= 1;
+//         },
+//     },
+// });
+//
+// export const {
+//     actions: counterActions,
+//     reducer: counterReducer,
+//     useActions: useCounterActions,
+// } = counterSlice;

src/entities/Counter/ui/Counter.tsx

@@ -18,6 +18,11 @@ export const Counter = () => {
         dispatch(counterActions.decrement());
     };
 
+    // work with data without dispatch \ select
+
+    // const counterValue = useCounterValue();
+    // const { decrement, increment, add } = useCounterActions();
+
     return (
         <div>
             <h1 data-testid="value-title">{counterValue}</h1>

src/shared/lib/store/buildSelector.ts

@@ -0,0 +1,11 @@
+import { useSelector } from 'react-redux';
+import { StateSchema } from '@/app/providers/StoreProvider';
+
+type Selector<T> = (state: StateSchema) => T;
+type Result<T> = [() => T, Selector<T>]
+
+export function buildSelector<T>(selector: Selector<T>): Result<T> {
+    const useSelectorHook = () => useSelector(selector);
+
+    return [useSelectorHook, selector];
+}

src/shared/lib/store/buildSlice.ts

@@ -0,0 +1,24 @@
+import { bindActionCreators, createSlice } from '@reduxjs/toolkit';
+import { SliceCaseReducers, CreateSliceOptions } from '@reduxjs/toolkit/dist';
+import { useDispatch } from 'react-redux';
+import { useMemo } from 'react';
+
+export function buildSlice<
+    State,
+    CaseReducers extends SliceCaseReducers<State>,
+    Name extends string = string
+    >(options: CreateSliceOptions<State, CaseReducers, Name>) {
+    const slice = createSlice(options);
+
+    const useActions = (): typeof slice.actions => {
+        const dispatch = useDispatch();
+
+        // @ts-ignore
+        return useMemo(() => bindActionCreators(slice.actions, dispatch), [dispatch]);
+    };
+
+    return {
+        ...slice,
+        useActions,
+    };
+}

src/shared/lib/store/index.ts

@@ -0,0 +1,2 @@
+export { buildSelector } from './buildSelector';
+export { buildSlice } from './buildSlice';