Baby Basic Setup Redux Toolkit.

ek3nk4r 2025-02-12

0 0 خواندن این مطلب 1 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

شما می توانید ساختار DIR خود را هرچند که می خواهید تنظیم کنید.

src
├ app
│ ├ layout.js
│ │ ├ redux
│ │ │ ├ provider.js
│ │ │ └ store
│ │ │   ├ index.js
│ │ │   └slices
│ │ │      └ userSlice.js
... other dirs

import { createSlice } from '@reduxjs/toolkit'

const initialState = { user: {}, isLoggedIn: false }

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload
    },
    setIsLoggedIn: (state, action) => {
      state.isLoggedIn = action.payload
    }
  },
})

export const { setUser, setIsLoggedIn } = userSlice.actions
const userReducer = userSlice.reducer
export default userReducer

Store/index.js -> Store.js

'use client'
import { configureStore } from "@reduxjs/toolkit"
import userReducer from "./slices/userSlice"
export const store = configureStore({
  reducer: {
    user: userReducer
  }
})

'use client'

const { Provider } = require("react-redux")
const { store } = require("./store")

const ReduxProvider = ({ children }) =>
  <Provider store={store}>
    {children}
  </Provider>

export default ReduxProvider

//other imports
import ReduxProvider from "./redux/provider";
// ... other code
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className='...'>
        <ReduxProvider>
            {children}
        ReduxProvider>
      body>
    html>
  );