01

src/app/redux/features/couterSlice.ts

@@ -0,0 +1,27 @@
+'use client'
+
+import { createSlice } from "@reduxjs/toolkit"
+
+interface CounterState {
+    counter_value: number
+}
+
+const initialState: CounterState = {
+    counter_value: 0
+}
+
+export const counterSlice = createSlice({
+    name: 'counter',
+    initialState,
+    reducers: {
+        incr: (state)=>{
+            state.counter_value += 1
+        },
+        decr: (state)=>{
+            state.counter_value -= 1
+        },
+    },
+})
+
+export const { incr, decr } = counterSlice.actions;
+export default counterSlice.reducer;

src/app/redux/provider.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { Provider } from "react-redux"
+import { store } from "./store"
+
+const ReduxProvider = ({children} : {children: React.ReactNode})=>{
+    return (
+        <Provider store={store}>
+            { children }
+        </Provider>
+    )
+}
+
+export default ReduxProvider

src/app/redux/store.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { configureStore } from "@reduxjs/toolkit"
+import couterReducer from "./features/couterSlice"
+
+
+export const store = configureStore({
+    reducer: {
+        counter: couterReducer
+    },
+})
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
+